テーブル・一覧コード生成用
合計行つきの明細表
見積書や請求書のように、小計・税・合計まで。
用途・説明
品目・数量・単価・金額を並べ、最後に小計・消費税・合計を表示する明細表を作成します。見積もりや請求、注文内容の確認の画面に向いています。金額の計算と、桁区切りの表示を含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[明細のリスト]- 品目・数量・単価を3〜6行
[税率]- 例：10%
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「合計行つきの明細表」を実装してください。 ## 表示内容 - 明細： [明細のリスト] （列：品目、数量、単価、金額） - 合計の欄：小計、消費税（[税率]）、合計 ## レイアウト - 品目は左揃え、数量・単価・金額は右揃え - 合計の欄は、表の下の右側に寄せる（項目名と金額の2列） - スマホでは、単価の列を隠し、品目の下に「単価 × 数量」を小さく表示する ## デザイン - 表：外枠 1px solid #E2E8F0、角丸 10px。見出しの行は背景 #F7F9FC・文字 13px・font-weight 700・色 #5F6D84 - データのセル：14px、色 #1B2A44、padding 12px 16px、下に 1px solid #EDF1F7 - 小計・消費税：14px、色 #5F6D84、上下padding 6px - 合計：項目名 14px・font-weight 700・色 #1B2A44、金額 20px・font-weight 700・色 #1463F0。上に 2px solid #1B2A44 - 金額は等幅の数字にし、3桁ごとにカンマを入れ、先頭に「¥」を付ける ## 計算 - 金額 ＝ 数量 × 単価 - 小計 ＝ 金額の合計 - 消費税 ＝ 小計 × 税率（1円未満は切り捨て。端数の扱いを変える場合の箇所をコメントで示す） - 合計 ＝ 小計 ＋ 消費税 - 小数の計算で誤差が出ないよう、金額は整数（円）で扱う - 税率の異なる品目（軽減税率）がある場合の拡張の方法を、コメントで補足する ## マークアップ - 明細は thead / tbody、合計の欄は tfoot に入れる - tfoot の項目名のセルは th（scope="row"）にする ## アクセシビリティ - 金額は「¥297,000」と表示し、読み上げで「297,000円」と伝わるようにする - 表の caption に、何の明細かを入れる ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。