テーブル・一覧コード生成用
スマホでカードに変わる表
PCでは表、スマホでは1件ずつのカードに。
用途・説明
PCでは通常の表、スマホでは1行を1枚のカードにして縦に並べる表を作成します。横スクロールなしで、すべての項目を読めます。会員や注文の一覧など、1件ごとの情報を確認する表に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、3〜5行のデータ
[カードの見出しにする列]- 例：氏名
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スマホでカードに変わる表」を実装してください。 ## 表示内容 [表の内容] - カードの見出しにする列：[カードの見出しにする列] ## レイアウト - PC（768px以上）：通常の表として表示する - スマホ（767px以下）：見出しの行を隠し、1行を1枚のカードにして縦に並べる。カードの間隔 12px - カードのなかは、「項目名：値」を1行ずつ。項目名を左、値を右に置く - カードの見出しにする列は、いちばん上に大きく表示する ## デザイン ### PC - 外枠 1px solid #E2E8F0、角丸 10px。見出しの行は背景 #F7F9FC・文字 13px・font-weight 700・色 #5F6D84 - データのセル：14px、色 #1B2A44、padding 12px 16px、下に 1px solid #EDF1F7 ### スマホ - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px - カードの見出し：16px、font-weight 700、色 #1B2A44、padding 14px 16px、下に 1px solid #E2E8F0 - 各行：padding 10px 16px、下に 1px solid #EDF1F7。項目名 13px・色 #5F6D84、値 14px・色 #1B2A44・右揃え - 状態などの重要な値は、#1463F0 のバッジで表示する ## 実装 - HTML は table のまま1つだけ書き、スマホでは CSS で display を変えてカードにする - 各セルに data-label 属性で項目名を持たせ、スマホでは疑似要素（::before）で表示する - display を変えると、表としての読み上げが失われることがあるため、role="table" / "row" / "cell" などを明示的に付ける ## アクセシビリティ - 見出しのセルは th（scope="col"） - スマホで隠す見出しの行は、読み上げには残す（見た目だけ隠す） - 値が空のセルは「—」と表示し、読み上げ用に「なし」を添える ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。