テーブル・一覧コード生成用
先頭の列が固定される表
横にスクロールしても、項目名の列が残る。
用途・説明
列の多い表で、横にスクロールしても左端の列が残る表を作成します。月ごとの数字や、項目の多い比較など、横に長い表をスマホでも読めるようにします。固定した列の右に影を付け、続きがあることを伝えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 左端の項目名と、6列以上のデータ。例：店舗ごとの月別の売上
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「先頭の列が固定される表」を実装してください。 ## 表示内容 [表の内容] ## レイアウト - 表を囲む要素を横スクロールにする。表そのものは、内容に合わせた幅にする（縮めない） - 左端の列は position: sticky（left: 0）で固定する - 左端の列の幅は、内容に合わせつつ最大 160px。それ以外の列は最小 88px - 数字の列は右揃え ## デザイン - 外枠：1px solid #E2E8F0、角丸 10px - 見出しの行：背景 #F7F9FC、文字 13px・font-weight 700・色 #5F6D84 - 左端の列：背景は #1463F0 の9%の淡い色、文字 14px・font-weight 700・色 #1B2A44 - 横にスクロールしているあいだだけ、左端の列の右に影（4px 0 8px rgba(27,42,68,0.08)）を付ける - データのセル：文字 14px・色 #1B2A44、padding 12px 16px、下に 1px solid #EDF1F7 - 数字は等幅の数字にする ## 動作 - 右にまだ続きがあるあいだ、表の右端を背景色へ向けてぼかす - 見出しの行も固定する場合の書き方（左上のセルは、両方向に固定する）をコメントで補足する ## 実装の注意 - 固定する列のセルに、必ず背景色を付ける（付けないと、流れる列が透けて見える） - 固定する列の z-index を、ほかのセルより大きくする ## アクセシビリティ - 左端の列のセルは th（scope="row"）、見出しの行は th（scope="col"） - スクロールする要素に tabindex="0"、role="region"、aria-label を付ける - 「横にスクロールできます」の案内を、スマホのときだけ表の上に表示する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。