テーブル・一覧コード生成用
サイズ表
S・M・L ごとの寸法を、単位を切り替えて見せる。
用途・説明
衣類や家具などのサイズ表を作成します。サイズを横、測る場所を縦に並べ、cm と inch を切り替えられます。選んでいるサイズの列を目立たせ、測り方の説明も添えます。ECサイトの商品ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サイズと寸法]- 例：S/M/L/XL の、着丈・身幅・肩幅・袖丈（cm）
[測り方の説明]- 例：平置きで測っています。1〜2cm の誤差が出ることがあります
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「サイズ表」を実装してください。 ## 表示内容 - サイズと寸法：[サイズと寸法] - 単位の切り替え：cm / inch - 測り方の説明：[測り方の説明] ## レイアウト - 見出し「サイズ表」の右に、単位の切り替えを置く - 表は、左端に測る場所の列、その右にサイズの列。サイズの列は同じ幅で、中央揃え - スマホで収まらないときは、測る場所の列を固定して横スクロールにする - 測り方の説明は、表の下に ## デザイン - 表：外枠 1px solid #E2E8F0、角丸 10px - 見出しの行（サイズ）：背景 #F7F9FC、文字 14px・font-weight 700・色 #5F6D84 - 測る場所：14px、font-weight 700、色 #1B2A44 - 数字：15px、色 #1B2A44、等幅の数字 - 選んでいるサイズの列：背景は #1463F0 の9%の淡い色、文字 #1463F0・font-weight 700 - セルの padding：12px 8px、下に 1px solid #EDF1F7 - 単位の切り替え：角ばったピル型。外側の背景は #1463F0 の12%の淡い色、選択中は白い背景に #1463F0 の文字 - 測り方の説明：13px、line-height 1.7、色 #5F6D84 ## 動作 - 単位を切り替えると、すべての数字を換算して表示する（1 inch = 2.54cm、小数第1位まで） - もとの値は cm で持ち、表示のときに換算する - 商品ページで選んだサイズと連動して、その列を強調できるようにする（値を渡すと変わる） - 選んだ単位を保存し、次に開いたときも同じ単位で表示する ## アクセシビリティ - サイズのセルは th（scope="col"）、測る場所のセルは th（scope="row"） - 単位の切り替えは、ラジオボタン（role="radiogroup"）として実装する - 単位が変わったことを aria-live="polite" で伝える - 表の caption に、いまの単位を含める（例：「サイズ表（単位：cm）」） ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。