【コピペOK】よくある質問（FAQ）のシンプルなCSSサンプル

完成品

こんなことには対応してますか？

はい、こんなことには対応しています。

ただ、あんなことにやそんなことには対応してません。

上記のCSSサンプルです。

超シンプル、アコーディオン開閉とかもしません。

質問・回答文が複数行になったときに2行目が「Q」「A」の真下に回り込まず、きちんと左側に余白ができるようにしました。

HTML

dlタグで作ります。

「Q」「A」の文字は擬似要素で表示させますので、タグ内は単純に質問、回答の文言だけ書けばオッケーです。

CSS

CSSのポイントは

• 7行目で、擬似要素「Q」「A」が記載される分を余白として空けておく
• 12〜14行目で、擬似要素「Q」「A」を左端に固定

です。これで質問・回答文が複数行になったときに2行目が「Q」「A」の真下に回り込まず、文章の左端が揃うようになります。

コメント部分なんかはお好みで。

ちなみに文章、とくに回答文は一言だけでなく、それなりのボリュームになることも多いと思います。

dt、ddタグにはいろんなタグが入れ子にできますので、きちんとpタグを使って記述するのがふさわしいですね。

SCSS

SCSS版でも置いておきます。