ホームページを作成していると「よくある質問」的なページを作ることがあります。これまで、何度か作って来たのですが、いい加減テンプレート化しておこうと思いましたので、ここで共有させていただきます。

dlタグを使ってQ&Aを作る方法

使うタグは、いろいろあると思いますが、要素の意味から考えると、定義リストが良いかなと思います。

ボタンで表示を切り替えてご覧ください。

See the Pen
FAQ by kenichi (@ken81)
on CodePen.

HTML

<dl class="faq">
  <dt>質問です</dt>
  <dd>回答です。</dd>
  <dt>質問です</dt>
  <dd>回答です。</dd>
</dl>

CSS

dl.faq dt:before,
dl.faq dd:before{
  font-size: 2em;
  margin-right: .5em;
}
dl.faq dt:before{
  content:"Q";
  color: #c80021;
}
dl.faq dd:before{
  content:"A";
  color: #0085C8;
}
dl.faq dd{
  border-bottom: 1px dotted #999;
  margin-left: 0;
}

dtの疑似要素::beforeには「Q」の文字、ddの疑似要素::beforeには、「A」の文字を表示させて、それぞれ色を付けました。

それから、それぞれの質問と回答がひとつのブロックとして視覚的に分かりやすいようにddの下に、ドット線を付けてみました。

もう一つ作ってみました。

See the Pen
FAQ02 by kenichi (@ken81)
on CodePen.

HTML

<dl class="faq">
  <dt>質問です</dt>
  <dd>回答です。</dd>
  <dt>質問です</dt>
  <dd>回答です。</dd>
</dl>

CSS

.faq{
  background: #F6F6F6;
  padding: 1em;
  border-radius: 1em;
}
.faq dt{
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px dotted;
  font-weight: bold;
}
.faq dt:before{
  content: "Q";
  font-weight: normal;
  background: #cc0000;
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.6;
  text-align: center;
  display: inline-block;
  border-radius: 1em;
  margin-right: .5em;
}
.faq dd{
  margin-bottom: 2em;
}
.faq dd:last-child{
  margin-bottom: 0;
}

かなり単純な感じになっていますが、デザイン的な部分はそれぞれの好みがあると思いますのでいろいろ編集してみてください。以上が、dlタグを使ってQ&Aを作る方法でした。