テーブル・一覧コード生成用
項目と内容を並べる概要表
会社概要や商品仕様など、左に項目・右に内容。
用途・説明
左に項目名、右にその内容を並べる、2列の概要表を作成します。会社概要、商品の仕様、募集要項、店舗情報など、多くのサイトで使う形です。スマホでは、項目名を内容の上に置いて縦に並べます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目と内容]- 例：会社名、設立、所在地、事業内容 と、それぞれの内容
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「項目と内容を並べる概要表」を実装してください。 ## 表示内容 [項目と内容] ## レイアウト - PC：2列。左に項目名（幅 200px）、右に内容 - スマホ（599px以下）：項目名を内容の上に置いて、縦に並べる - 最大幅 800px ## デザイン - 表のいちばん上に、2px solid #1463F0 の線 - 各行の下に、1px solid #E2E8F0 の線 - 項目名：背景 #F7F9FC、文字 15px・font-weight 700・色 #1B2A44、padding 20px 24px、上揃え - 内容：文字 15px・line-height 1.8・色 #1B2A44、padding 20px 24px - スマホ：項目名は背景を付けたまま padding 12px 16px、内容は padding 12px 16px 20px - 内容のなかのリンクは、色 #1463F0・下線つき - 外枠と縦の線は付けない ## 内容の書き方 - 複数の値がある項目（事業内容、取引先など）は、箇条書きにする - 住所には、地図へのリンクを添えられるようにする - 電話番号は、スマホで押すと発信できるリンク（tel:）にする - 長い内容でも、項目名が上にそろうようにする ## マークアップ - 定義リスト（dl / dt / dd）、または table（th scope="row" / td）でマークアップする。どちらを選んだかと、その理由をコメントで説明する - スマホでの縦並びは CSS だけで行う（HTML は1つだけ書く） ## アクセシビリティ - 項目名と内容の対応が、読み上げでも分かるようにする - リンクの文言は、行き先が分かるようにする（「こちら」は使わない） ## 出力形式 - [使用技術]のコードを1つ出力 - 項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。