テーブル・一覧コード生成用
行を開いて詳細を見る表
行を押すと、その下に詳しい内容が開く。
用途・説明
行の先頭の矢印を押すと、その行の下に詳しい内容が開く表を作成します。一覧には要点だけを載せ、必要なときだけ詳細を見られます。注文の明細や、履歴の内訳、ログの詳細などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、4〜6行のデータ
[詳細の内容]- 例：注文した商品の明細、お届け先
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「行を開いて詳細を見る表」を実装してください。 ## 表示内容 - 表： [表の内容] - 各行の詳細：[詳細の内容] ## レイアウト - 左端に、開閉のボタンの列（幅 48px）を置く - 詳細は、その行のすぐ下に、表の幅いっぱいの行として表示する（colspan ですべての列をまたぐ） - 詳細のなかは、左端のボタンの列の幅ぶん、字下げする ## デザイン - 表：外枠 1px solid #E2E8F0、角丸 10px。見出しの行は背景 #F7F9FC - データのセル：14px、色 #1B2A44、padding 12px 16px、下に 1px solid #EDF1F7 - 開閉のボタン：32×32px、右向きの山形（色 #8A96AA）。開いているときは下向きに回転し、色 #1463F0 - 開いている行：背景は #1463F0 の9%の淡い色 - 詳細の行：背景 #F7F9FC、padding 16px 24px - 詳細のなかの項目名：12px、色 #5F6D84。値：14px、色 #1B2A44 ## 動作 - 開閉のボタンを押すと、詳細が開閉する。複数の行を同時に開ける - 開閉は 0.2秒。山形は同時に90度回転する - 詳細の内容をあとから読み込む場合は、読み込み中の表示を出す（コールバックで取得できる形にする） - 「すべて開く／すべて閉じる」のボタンを、表の上に用意する ## アクセシビリティ - 開閉のボタンは button 要素で、aria-expanded と aria-controls を設定する。aria-label に、どの行の詳細かを入れる（例：「注文 #1042 の詳細」） - 閉じている詳細の行は hidden 属性で隠す - 詳細のなかの項目は dl / dt / dd でマークアップする - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。