CSS

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

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

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を作る方法でした。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP