FAQコード生成用
「すべて開く」ボタン付きのFAQ
ひとつずつ開かなくても、まとめて開いて読める。
用途・説明
アコーディオンの上に「すべて開く／すべて閉じる」のボタンを付けたFAQを作成します。質問が多いときに、ひとつずつ押さなくても全部の回答を読めます。ページ内検索（Ctrl+F）で探したい人や、印刷して読みたい人にも便利です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を6〜10組
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「『すべて開く』ボタン付きのFAQ」を実装してください。 ## 表示内容 [質問と回答] - 一覧の右上に、「すべて開く」ボタン（すべて開いているときは「すべて閉じる」に変わる） - 左上に、質問の件数（例：全8件） ## レイアウト - 上部の行：左に件数、右にボタン。その下にアコーディオン - アコーディオンは、質問を縦に並べて線で区切る ## デザイン - 件数：14px、色 #5F6D84 - 「すべて開く」ボタン：高さ 36px、左右padding 14px、枠線 1px solid #DCE4F0、角丸 999px、背景 #FFFFFF、文字 #1463F0・13px・font-weight 700。左に上下の矢印のアイコン - 質問：16px、font-weight 700、上下 padding 20px。左に「Q」（#1463F0） - 回答：15px、line-height 1.9、色 #5F6D84 - 開閉の印：右端に「＋／−」 ## 動作 - ボタンを押すと、すべての質問が開く。もう一度押すと、すべて閉じる - 個別に開閉して、すべてが開いた状態になったら、ボタンの文言を「すべて閉じる」に変える - 印刷時（@media print）は、すべての回答を開いた状態で出力する - ブラウザのページ内検索で回答の文字も見つかるよう、閉じている回答は hidden="until-found" で隠す（対応していないブラウザでの動作も説明する） ## アクセシビリティ - 「すべて開く」ボタンには aria-expanded を付け、対象の一覧を aria-controls で示す - 質問は h3 のなかの button 要素 - まとめて開閉したときは、動きを付けずにすぐ切り替える ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。