FAQコード生成用
ダーク背景のFAQ
暗い背景に白い文字で、落ち着いた印象のアコーディオン。
用途・説明
暗い背景のうえに白い文字で表示する、アコーディオン形式のFAQを作成します。ページ全体がダークな配色のサイトや、ページの最後で雰囲気を切り替えたいときに向いています。暗い背景でも読みやすいよう、文字の明るさと線の濃さを調整しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を4〜6組
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ダーク背景のFAQ」を実装してください。 ## 表示内容 - 見出し：よくあるご質問 [質問と回答] ## レイアウト - セクションの背景：#1B2A44。上下 padding 96px（スマホ 64px） - 見出しは中央、その下にアコーディオン（最大幅 760px） - 質問を縦に並べ、質問の間は線で区切る ## デザイン - 見出し：32px、font-weight 700、色 #FFFFFF - 区切りの線：1px solid rgba(255, 255, 255, 0.16) - 質問：16px、font-weight 700、色 #FFFFFF、上下 padding 22px - 「Q」：色は #7FA9F7 の55%の明るい色（暗い背景でも見えるように、#7FA9F7 より明るくする） - 回答：15px、line-height 1.9、色 rgba(255, 255, 255, 0.78) - 開閉の印：右端に「＋／−」、色 rgba(255, 255, 255, 0.72) - hover：行の背景 rgba(255, 255, 255, 0.04) ## 動作 - 質問の行を押すと開閉する（高さのアニメーション 0.25秒） ## アクセシビリティ - 質問の文字・回答の文字ともに、背景とのコントラスト比 4.5:1 以上を確保する。足りない場合は色の調整案を出す - フォーカスリングは白の 2px にして、暗い背景でもはっきり見えるようにする - 質問は h3 のなかの button 要素。aria-expanded と aria-controls を付ける - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 背景色・文字色・線の色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。