
2020.09.21
コーディング
【コピペ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版でも置いておきます。