FAQコード生成用
1問ずつカードにしたアコーディオン
質問ごとに独立したカードが、開くと色づく。
用途・説明
質問を1つずつ角丸のカードにして、間隔をあけて並べるアコーディオンを作成します。開いたカードは枠線に色が付き、どれを読んでいるかがはっきりします。背景に色のあるセクションに置いても質問が埋もれないので、ランディングページのFAQに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を4〜6組
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「1問ずつカードにしたアコーディオン」を実装してください。 ## 表示内容 [質問と回答] ## レイアウト - 質問ごとに1枚のカード。カードの間隔 12px - カードのなか：上に質問の行（左に質問、右端に下向きの山形のアイコン）、その下に回答 - コンテナの最大幅 760px、中央配置 ## デザイン - セクションの背景：#F1F5FC - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px - 質問の行：padding 20px 24px。質問は 16px、font-weight 700、色 #1B2A44 - 山形のアイコン：20px、色 #5F6D84。開いたら 180度回転し、色を #1463F0 に - 開いたカード：枠線 1px solid #1463F0、影 0 4px 16px rgba(20, 99, 240, 0.08) - 回答：padding 0 24px 20px、15px、line-height 1.9、色 #5F6D84 - hover：枠線を #CBD5E1 に ## 動作 - 質問の行を押すと開閉する（高さのアニメーション 0.25秒） - 1つ開くと、ほかの開いているカードは閉じる（1つだけ開く方式）。複数開ける方式への切り替え方をコメントで補足する ## アクセシビリティ - 質問は h3 のなかの button 要素。aria-expanded と aria-controls を付ける - カード全体ではなく、質問の行の button がフォーカスを受ける。focus-visible のリングはカードの外側に表示する - アイコンは aria-hidden="true" - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。