テーブル・一覧コード生成用
「もっと見る」ボタン
押すたびに、続きが下に追加される。
用途・説明
一覧の下の「もっと見る」ボタンを押すと、続きの項目が下に追加されるパーツを作成します。ページを移動せずに読み進められます。全体のうち何件を表示しているかを、件数と細いバーで示します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[一覧の内容]- 例：記事カードのグリッド（1回に12件ずつ）
[ボタンの文言]- 例：もっと見る
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「もっと見る」ボタンを実装してください。 ## 表示内容 - 一覧：[一覧の内容] - 件数の表示（例：48件中 12件を表示）と、進み具合のバー - ボタン：[ボタンの文言] ## レイアウト - 一覧の下 40px に、中央揃えで 件数 → バー → ボタン を縦に並べる ## デザイン - 件数：13px、色 #5F6D84 - バー：幅 160px、高さ 3px、角丸 999px、背景 #DCE4F0。表示している割合を #1463F0 で塗る - ボタン：高さ 48px、左右padding 40px、角丸 999px、背景 #FFFFFF、枠線 1.5px solid #1463F0、文字 #1463F0・15px・font-weight 700 - hover：背景 #1463F0、文字 #FFFFFF - 読み込み中：ボタンの文言を「読み込み中…」にし、左に小さく回る輪を表示する ## 動作 - ボタンを押すと、続きを読み込んで、一覧の下に追加する - 追加された項目は、0.3秒でフェードインする - すべて表示したら、ボタンを消して「すべて表示しました」と表示する - 読み込みに失敗したら、ボタンの上にメッセージを表示し、ボタンを「もう一度試す」に変える - 表示した件数を URL に反映し、別のページから「戻る」で戻ったときに、同じ位置まで表示された状態にする ## 自動で読み込む場合 - 画面の下までスクロールしたら自動で読み込む方式（無限スクロール）にする場合の書き方を、コメントで補足する - その場合も、フッターにたどり着けなくならないよう、2〜3回の自動の読み込みのあとは、ボタンに切り替える ## アクセシビリティ - ボタンは button 要素。読み込み中は aria-busy="true" にし、無効にする - 追加されたら、「12件を追加しました。48件中 24件を表示」を aria-live="polite" で伝える - 追加のあと、フォーカスを新しく追加された最初の項目に移す（ボタンに残したままだと、キーボードで続きを読めない） - JavaScript が無効でも続きを見られるよう、ボタンを次のページへのリンクとしても機能させる - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。