ナビゲーションコード生成用
ページネーション
記事一覧や検索結果の、前後のページへ進む番号ボタン。
用途・説明
記事一覧や商品一覧の下に置く、ページ番号のナビゲーションを作成します。ページ数が多いときは途中を「…」で省略し、スマホでは「前へ／次へ」と現在のページだけに絞ります。現在地の示し方や、押せないボタンの扱いまで指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[総ページ数]- 例：12
[URLの形式]- 例：/blog/page/2、?page=2
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフロントエンドエンジニアです。 以下の条件で「ページネーション」を実装してください。 ## 表示内容 - 「前へ」ボタン、ページ番号、「次へ」ボタン - 総ページ数：[総ページ数] - リンク先のURL：[URLの形式] ## 番号の出し方 - 総ページ数が7以下：すべての番号を表示 - 8以上：最初と最後のページ、現在のページとその前後1つずつを表示し、あいだは「…」で省略する （例：現在6ページ目 → 1 … 5 6 7 … 12） - 現在のページが変わっても、全体の幅がなるべく変わらないようにする ## デザイン - 中央揃えで横に並べる。ボタン同士の間隔 6px、上下の余白 48px - 番号ボタン：40×40px、角丸 10px、文字 14px、色 #47566E、背景なし - hover：背景 #F4F6FA - 現在のページ：背景 #1463F0、文字 #FFFFFF、font-weight 700 - 「前へ」「次へ」：左右向きの矢印アイコン（16px）＋文字、高さ 40px、左右の padding 12px - 最初のページでは「前へ」、最後のページでは「次へ」を薄く（不透明度 40%）して押せなくする - 「…」はボタンにせず、色 #8A96AA の文字として置く ## スマホ（640px未満） - 番号を隠し、「前へ」「3 / 12」「次へ」の3つだけを表示する - ボタンのタップ領域は 44×44px 以上にする ## アクセシビリティ - nav 要素に aria-label="ページ送り" を付け、ul / li と a 要素でマークアップする - 現在のページには aria-current="page" - 番号リンクには「3ページ目」のように読み上げられるラベルを付ける - 押せない「前へ」「次へ」は、リンクにせず aria-disabled="true" の要素にする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 現在のページと総ページ数を渡すと、表示する番号の並びを返す関数を分けて書く - 検索エンジン向けに、各ページを通常のリンク（a 要素）でたどれるようにしておく理由を最後に1文で補足
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。