FAQコード生成用
質問の目次つきFAQ
上に質問の一覧、押すと下の回答へジャンプ。
用途・説明
ページの上部に質問だけを並べた目次を置き、押すと下にある回答の位置へ移動するFAQを作成します。回答が長めで、ひとつずつしっかり説明したい場合に向いています。回答の最後には「質問の一覧に戻る」リンクを付けます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を5〜8組（回答は長めでもよい）
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「質問の目次つきFAQ」を実装してください。 ## 表示内容 [質問と回答] ## レイアウト - 上部：質問の目次（枠で囲む）。PCは2列、スマホは1列 - 下部：質問と回答を、目次と同じ順番で縦に並べる。組の間隔 56px - 各回答の最後に「↑ 質問の一覧に戻る」のリンク ## デザイン - 目次の枠：背景 #F7F9FC、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - 目次の見出し：「質問の一覧」14px・font-weight 700・色 #5F6D84 - 目次の項目：15px、色 #1463F0、行頭に「Q」。hover で下線 - 下部の質問：20px、font-weight 700、色 #1B2A44。左に #1463F0 の太い線（4px） - 回答：15px、line-height 2、色 #47566E - 「質問の一覧に戻る」：13px、色 #5F6D84、右寄せ ## 動作 - 目次の項目を押すと、対応する質問へなめらかにスクロールする - 固定ヘッダーがある場合に見出しが隠れないよう、scroll-margin-top を指定する - URLのハッシュに質問の id を反映する ## アクセシビリティ - 目次は nav 要素（aria-label="質問の一覧"）のなかの ol / li - 下部の質問は h3 にし、id を付ける - 移動したあと、フォーカスも質問の見出しへ移す（tabindex="-1" を使う） - prefers-reduced-motion のときは、なめらかなスクロールをやめる ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡し、id は自動で付ける
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。