-
Next.jsでTailwind CSSをインストールする方法
npm npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p tailwind.config.js /** @type {impo […] -
CSS
番号付きリストが「010」になるのを「10」にするCSSは「decimal-leading-zero」です。
完成形のイメージ See the Pen 番号付きリスト01~10 by shimpei (@shimpei) on CodePen. HTML 適当にリストを作ります。クラス名はnum-listにしました。 SCSS […] -
CSS
【コピペOK】blockquote要素の作り方HTML&CSS｜引用文
はぁーまたqlockquoteか〜ちょっと面倒なんだよなぁどうやってつくるんだっけ？ よくある感じのHTMLとCSSのテンプレ置いときますね〜 完成形のイメージ See the Pen Untitled by shimp […] -
React
CodePenでReactを使用する方法
完成形【セッティング完了のCodePen】 See the Pen map関数 React by shimpei (@shimpei) on CodePen. CodePenの設定 ①JSの⚙歯車ボタンをクリック ②プリ […] -
Code
ターミナルから「code .」でVSCodeを開く【使い方、おすすめ、ショートカット】
VSCodeをすばやく開く方法を知りたい人 VSCodeってみんなどうやって開いてる？ しんぺーターミナルから「code .」で開くのいいですよ。今回紹介する方法はVisual Studio Codeの公式リファレンスで […] -
NotionAPI×Next.jsで、画像を表示する方法。useSWRを使用して画像のURLのみページ表示時にレンダリングする
NotionAPIで画像を取得すると、1時間で期限切れになるURLの問題に直面することになります。みなさん様々な工夫をされていますが、useSWRを使用してこの問題を回避しました。 useSWRはデータのフェッチとキャッ […] -
Next.jsとmicroCMSでサイト構築①｜API連携
Next.jsでmicroCMS API連携する方法を解説します。環境構築やアプリケーション立ち上げについて知りたい方は、こちらの記事を参照ください。 microCMS APIを呼び出す為に、公式クライアントライブラリを […] -
CSS
スクロールバー非表示は、-webkit-scrollbarをdisplay: none;にします。
スクロールバーを非表示にした人 スクロールする前から、ずっとスクロールバーが表示さていて嫌だな。消したいけど、どうやったらいいんだ？ WebKitエンジンを使用しているブラウザであれば、-webkit-scrollbar […] -
Blog
macのスクショをpngからjpgに変更する方法
しんぺー macのスクショはデフォルトでpngファイルですが、重いしjpgにしたいなぁ〜と思って調べると、簡単に変更できたので、メモに残しておきます。 pngに戻すのも簡単です。 png → jpg ターミナル開いて j […] -
【ステップ：0ゼロ】Next.jsのはじめかた｜誰も教えてくれない、アプリ構築前の準備
環境構築という最初の壁が高いと感じた頃の自分へ Next.js始めたくて、公式ドキュメントや書籍の最初のステップやったけど、エラーでた。やめよかな。 しんぺーそもそも環境構築が必要なのに、その説明がないこと多いですよね。 […]
