テーブル・一覧コード生成用
シンプルな表
横線だけで区切る、すっきりした基本の表。
用途・説明
縦の線や背景色を使わず、横線だけで区切るシンプルな表を作成します。プランの比較や料金、仕様など、項目の少ない情報をすっきり見せたいときに向いています。スマホで横幅が足りないときの対応も含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、3〜5行のデータ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「シンプルな表」を実装してください。 ## 表示内容 [表の内容] ## レイアウト - 幅は親要素いっぱい。列の幅は内容に合わせる - 文字の列は左揃え、数字と金額の列は右揃え - スマホで収まらないときは、表を囲む要素を横スクロールにする（表そのものは縮めない） ## デザイン - 縦の線、外枠、背景色は付けない - 見出しの行：文字 13px・font-weight 700・色 #1B2A44、下に 2px solid #1B2A44 - データの行：文字 15px・色 #1B2A44、下に 1px solid #DCE4F0 - セルの padding：14px 16px（左端の列の左、右端の列の右は 0） - 強調したい列（金額など）は、font-weight 700・色 #1463F0 - 数字は等幅の数字（font-variant-numeric: tabular-nums）にして、桁をそろえる - hover：行の背景を #F7F9FC にする ## マークアップ - table / thead / tbody / tr / th / td で正しくマークアップする - 見出しのセルは th にし、scope="col" を付ける。行の見出しがある場合は scope="row" - 表の内容を説明する caption を付ける（見た目で隠してもよい） ## アクセシビリティ - 横スクロールにする要素には、tabindex="0"、role="region"、aria-label を付けて、キーボードでもスクロールできるようにする - レイアウトのために table を使わない。データの表だけに使う ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。