テーブル・一覧コード生成用
ページ送り（番号つき）
前へ・次へと、ページ番号で移動する。
用途・説明
一覧の下に置く、番号つきのページ送りを作成します。ページ数が多いときは、あいだを「…」で省略します。現在のページを強調し、最初と最後のページでは「前へ」「次へ」を押せなくします。スマホでは、表示する番号を減らします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[全体のページ数]- 例：12
[URLの形]- 例：/news?page=2
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ページ送り」を実装してください。 ## 表示内容 - 「前へ」（‹）、ページ番号、「次へ」（›） - 全体のページ数：[全体のページ数] - URLの形：[URLの形] ## 番号の出し方 - 最初のページ、最後のページ、現在のページとその前後1つを表示する - 表示しないページが2つ以上続くところは、「…」にする（1つだけなら、その番号を表示する） - 例（全12ページ）：1ページ目 → 「1 2 3 … 12」、6ページ目 → 「1 … 5 6 7 … 12」、12ページ目 → 「1 … 10 11 12」 - ページ数が7以下のときは、すべての番号を表示する - スマホでは、現在のページの前後を表示せず、「‹ 6 / 12 ›」の形にする ## デザイン - 全体を中央揃え。ボタンの間隔 6px - ボタン：40×40px、角丸 8px、枠線 1px solid #DCE4F0、背景 #FFFFFF、文字 14px・font-weight 700・色 #47566E - 現在のページ：背景 #1463F0、枠線 #1463F0、文字 #FFFFFF - hover：枠線と文字を #1463F0 にする - 押せない「前へ」「次へ」：文字 #CBD5E1、hover しても変化させない - 「…」：枠線と背景なし、色 #8A96AA ## 実装 - 現在のページと全体のページ数を渡すと、表示する番号の配列を返す関数を用意する - 各番号は、そのページの URL を持つ a 要素にする（JavaScript が無効でも移動でき、検索エンジンもたどれる） - ページ数が1のときは、ページ送りを表示しない ## アクセシビリティ - nav 要素に aria-label="ページ送り" を付ける。なかは ul / li - 現在のページに aria-current="page" - 各番号に aria-label="2ページ目"、「前へ」「次へ」に aria-label="前のページ" / "次のページ" - 押せない「前へ」「次へ」は、a 要素ではなく span にし、aria-disabled="true" - 「…」は aria-hidden="true" - タップ領域は 44px 以上（見た目が 40px の場合は、余白で補う） ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。