よくあるご質問やFAQの見た目をCSSでそれっぽく調整する

よくあるご質問やFAQなどのコンテンツをサクッとそれっぽい見た目に仕上げる方法をご紹介いたします。

紹介するCSSをコピペすれば、以下デモページのような見た目にすることができます。

デモページを見る

よくあるご質問やFAQの見た目をCSSでそれっぽく調整する

HTML側は、以下のようにします。

<dl class="qa">
 <dt>Q質問1</dt><dd>A回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</dd>
 <dt>Q質問2</dt><dd>A回答2回答2回答2回答2回答2回答2回答2回答2回答2回答2回答2回答2回答2回答2</dd>
 <dt>Q質問3</dt><dd>A回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3回答3</dd>
</dl>

dl要素にはqaというクラスを追加しています。

dt要素に質問、dd要素に回答を記述してください。質問の先頭は「Q」、回答の先頭は「A」を入れましょう。

CSS側は以下の通りです。

dl.qa {
 overflow: hidden;
 _zoom: 1;
}

dl.qa dd,
dl.qa dt {
 text-indent: -2.6em; 
 padding: 0 20px 0px 50px;
}

dl.qa dt {
 margin: 20px 20px 0 0;
}

dl.qa dd:first-letter,
dl.qa dt:first-letter {
 font-size: 1.6em;
 font-weight: bold;
 margin-right: 10px;
 padding: 5px;
}

dl.qa dd {
 margin: 10px 0 -1px 0;
 padding-bottom: 20px;
 border-bottom: solid 1px #aaa;
}

dl.qa dt:first-letter {
 color: #3498db;
}

dl.qa dd:first-letter {
 color: #ff6767;
}

dt:first-letterとdd:first-letterの色やサイズを変えることで、先頭に入れたQやAの見た目を調整しています。QやAの文字色を変更したい場合は、「dl.qa dt:first-letter」と「dl.qa dd:first-letter」のcolorを変更してください。

あとがき

コピペでサクッと見た目を調整できます。そんなに凝ったデザインじゃなくても良いけど、それなりに整えたいという場合に、ぜひ活用していただければと思います。