NotionAPI×Next.jsで、画像を表示する方法。useSWRを使用して画像のURLのみページ表示時にレンダリングする

NotionAPIで画像を取得すると、1時間で期限切れになるURLの問題に直面することになります。みなさん様々…

Next.jsとmicroCMSでサイト構築①｜API連携

Next.jsでmicroCMS API連携する方法を解説します。環境構築やアプリケーション立ち上げについて知…

スクロールバー非表示は、-webkit-scrollbarをdisplay: none;にします。

スクロールバーを非表示にした人 スクロールする前から、ずっとスクロールバーが表示さていて嫌だな。消したいけど、…

macのスクショをpngからjpgに変更する方法

しんぺーmacのスクショはデフォルトでpngファイルですが、重いしjpgにしたいなぁ〜と思って調べると、簡単に…

【ステップ：0ゼロ】Next.jsのはじめかた｜誰も教えてくれない、アプリ構築前の準備

環境構築という最初の壁が高いと感じた頃の自分へ Next.js始めたくて、公式ドキュメントや書籍の最初のステッ…

【コピペOK】自動でPDFのアイコンがつくボタン（Excelファイルや、Wordファイルも）

自動でPDFファイルのアイコンがつくボタン PDFファイルのアイコンがつくボタンは毎回クラス付けたり面倒だな。…

重複している要素があれば削除する、jQuery｜remove

重複しているコンテンツをjQueryで削除できないかな。 しんぺー下にサンプルのコードを置いておきますね。ただ…

ChatGPT関連の書籍

流行りのChatGPT関連の書籍で読んでみたいのをリストにしてみました。当然ですが、新しい技術なので日本語の本…

SG(静的生成)とSSR(サーバーサイドレンダリング)｜Next.js 2つのプリレンダリング

SG(静的生成)とSSR(サーバーサイドレンダリング)についてざっくり解説します。この解説を読んだあとにNex…

【コピペOK】FAQなどにある、アコーディオンのサンプル(jQuery)矢印やアイコンもつけれます

アコーディオンをパッと作成したい人 よくあるアコーディオンを作成したいけど、使い回しやすい良いサンプルないかな…

要素をランダムに並び替えるjQueryとJavaScript【Math.random】

要素をランダムに配置したい人 要素をランダムに表示させたいけど、jQueryでできるかな？ しんぺー簡単にで…

3,7,11,15を指定するCSSは？ nth-child(4n+3)です。

3番目、7番目、11番目の要素にスタイルを当てたい人 3、7、11番目の要素にスタイルを当てたいから〜えーっと…

ChatGPTのエラー解消方法｜“too many requests in 1 hour. try again later.“や “An error occurred. If this issue persists please contact us through our help center at help. openai.com.“

ChatGPT使ってたらエラーとか制限かかって使えなくなっている人 ChatGPTで遊んでたら使えなくなったん…

はじめてのChatGPT。コード生成に使ってみる。【チャグってハンバーガーメニューを作成】

ChatGPTにコーディングしてもらいました 正直ChatGPTよく知らないんだけど、なにがすごいの？ しんぺ…

【コピペOK】自動でPDFのアイコンをつけるCSS（Excelファイルや、Wordファイルも）

自動でファイルのiconを表示するCSS PDFとかExcelファイルある時に自動でアイコン付けれないかな？毎…

Day.jsで日付のフォーマットを整える｜React Next.js microCMS

ISO 8601形式のUTCをフォーマットして見やすくする 日付が2023-01-29T00:30:00.00…

【2行で解決】slickのasNavForで複数のフォトギャラリーを設置すると、全部動いてしまう

複数のフォトギャラリーを設置した時に、全部のスライドが動いてしまう フォトギャラリー複数設置したら、全部のスラ…

【コピペ用】GitHubでよく使うやつ｜これで8割なんとかなる

GitHubのなにが分からないのか分かりません しんぺーGitHubを使うにあたって、もっとも基本的なことは何…

【コピペ用】slick dotsを四角にカスタマイズ｜色変更

slickのdotsを長方形にしたい人 slickのdotsはデフォルトで丸いから四角くするの手間だなぁ。コピ…

【コピペ用】slickオプション「矢印(arrows)の出し方」｜矢印でない？画像の上。位置の設定。

slickの矢印を設置する面倒から開放されたい人 slickの矢印出すの面倒だなー。なんかないの？ しんぺーコ…

FontAwesomeを5秒で表示【コピペ用】

FontAwesomeをすぐ使いたい人 FontAwesomeを5秒で使えるようにして下さい。使い方の記事はた…

slick.jsの高さを100%にするとき（高さ0pxでslickが表示されない時）。

slickの高さが0pxになっていて、どこに高さを指定すればいいか分からない人 slick表示されないと思った…

HTMLで角丸のテーブルを作る｜overflow-hidden以外の方法

overflow-hidden以外の方法で角丸のテーブルを作る方法が知りたい人 角丸テーブルはoverflow…

form送信後に任意の場所にスクロールするには、formのaction属性に”#link01″とするだけ｜form submit後にページ内リンクを設定する

form送信後にページ内リンク設定できないかな？ページのコンテンツが長くて、フォーム欄が見えないんだよね。。 …

New｜はじめてのTailwind CSS【初心者向けインストール方法Ver.3】

TailwindCSSをサクッと体験してみたい人 TailwindCSS使ってみたいけど、公式ドキュメント読む…

Hey engineers! Here’s how to implement zoom & fade with slick slide!

People who think that SLICK does not allow zoom movemen…

ついに！slick.jsの有名なバグを解消！centerModeの2周目のガタツキ問題。

slickのガタツキは気にしないようにしているエンジニア 「slickガタついてるの直してー」って言われたけど…

Web3とは、デジタルファーストな世界のことです

The Meaning of Decentralization 最近よく聞くWeb3ってなに？ 今回はこんなギ…