テーブル・一覧コード生成用
しま模様の表
1行おきに色を付けて、横に目で追いやすく。
用途・説明
1行おきに淡い背景色を付けた、しま模様の表を作成します。列が多く、横に長い行を目で追う必要があるときに、行を見失いにくくなります。利用明細や履歴、一覧表などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、5〜8行のデータ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「しま模様の表」を実装してください。 ## 表示内容 [表の内容] ## レイアウト - 幅は親要素いっぱい。表の全体を、角丸のある枠で囲む - 文字の列は左揃え、数字と金額の列は右揃え - スマホで収まらないときは、枠のなかで横スクロールにする ## デザイン - 外枠：1px solid #E2E8F0、角丸 10px、overflow: hidden - 見出しの行：背景 #1463F0、文字 #FFFFFF・13px・font-weight 700 - データの行：文字 14px・色 #1B2A44 - 偶数番目の行：背景は #1463F0 の9%の淡い色。奇数番目の行：背景 #FFFFFF - 行のあいだの線は付けない（色の違いで区切る） - セルの padding：12px 16px - マイナスの金額は、色 #C9343A にし、先頭に「−」を付ける - hover：行の背景を #1463F0 の15%の淡い色にする ## マークアップ - table / thead / tbody で正しくマークアップする。見出しのセルは th（scope="col"） - しま模様は CSS の :nth-child(even) で付ける（クラスを行ごとに書かない） - 数字は等幅の数字にする ## アクセシビリティ - 見出しの行の、背景と白い文字のコントラスト比 4.5:1 以上を確認する - しま模様の色が薄すぎて見えない場合に備え、行の区別が色だけに頼らないよう、十分な行の高さを取る - マイナスの値は、色だけでなく「−」の記号でも示す - 横スクロールにする要素に tabindex="0" と aria-label を付ける ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。