テーブル・一覧コード生成用
見出しが固定される表
下にスクロールしても、列の見出しが残る。
用途・説明
行数の多い表で、下にスクロールしても見出しの行が上に残る表を作成します。どの列が何の値かを見失わずに読み進められます。注文の一覧や、データの多い管理画面の表に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、20行程度のデータ（サンプルは自動で作ってよい）
[表の高さ]- 例：480px、または画面の高さに合わせる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「見出しが固定される表」を実装してください。 ## 表示内容 [表の内容] ## レイアウト - 表を囲む要素の高さ：[表の高さ]。そのなかで縦にスクロールする - 見出しの行は position: sticky で、囲む要素の上端に固定する - ページ全体のスクロールで固定したい場合の書き方（top にヘッダーの高さを指定する）も、コメントで補足する ## デザイン - 外枠：1px solid #E2E8F0、角丸 10px - 見出しの行：背景 #F7F9FC、文字 13px・font-weight 700・色 #1463F0、下に 1px solid #E2E8F0 - スクロールしているあいだだけ、見出しの行の下に影（0 4px 8px rgba(27,42,68,0.1)）を付ける - データの行：文字 14px・色 #1B2A44、下に 1px solid #EDF1F7、高さ 48px - セルの padding：0 16px - hover：行の背景を #F7F9FC にする - スクロールバーは細め（幅 8px、角丸、色 #CBD5E1）にする ## 実装の注意 - 見出しのセル（th）に背景色を付ける（付けないと、下の行が透けて見える） - border-collapse: collapse のままだと、固定した見出しの線が消えることがあるため、線は box-shadow か疑似要素で描く - 影の表示は、スクロールの位置を見て切り替える ## アクセシビリティ - table / thead / tbody で正しくマークアップする。見出しのセルは th（scope="col"） - スクロールする要素に tabindex="0"、role="region"、aria-label を付ける - 行数が非常に多い場合は、ページ送りや絞り込みの併用を検討するよう、コメントで補足する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。