番号付き Q&A リスト
各質問に01、02…と通し番号を振った、読みやすさ重視のFAQです。 ol （順序付きリスト）と counter-reset ／ counter-increment を組み合わせ、 ::before で先頭ゼロ付きの番号を自動表示します。
このパーツの使いどころと実装ポイント
各質問に01、02…と通し番号を振った、読みやすさ重視のFAQです。ol（順序付きリスト）とcounter-reset／counter-incrementを組み合わせ、::beforeで先頭ゼロ付きの番号を自動表示します。質問はh3、回答はpという素直なマークアップなので、見出し構造が崩れにくいのも利点です。
向いている場面
- サービス紹介や記事末尾に置く定番の質問コーナー
- 申込み前の不安をまとめて解消したいランディングページ
- アコーディオン（開閉）にせず全文を一覧で見せたい場面
カスタマイズと注意点
番号はCSSが自動採番するので、質問を足し引きしても採番は崩れません。質問文は利用者が実際に検索しそうな言葉で書くと、内容と検索意図が一致します。回答は結論から先に書き、長くなる場合だけ補足を続けます。常に全文が見えるレイアウトのため、項目が10件を超えると縦に長くなりがちです。数が多いときは開閉式（details要素など）への切り替えも検討してください。番号の左余白（padding-left）は番号の桁数に合わせて調整します。
よくある質問
質問を追加したら番号がずれませんか
番号はCSSのカウンター機能で自動的に振られるため、olの中にliを足すだけで02、03と正しく続きます。手作業で番号を打つ必要はありません。
アコーディオンで開閉させたほうがいいですか
項目が少なく一覧性を重視するならこの全文表示が読みやすく親切です。質問が10件を超えて縦に長くなる場合は、details要素などで開閉式にしてスクロール量を抑える選択もあります。