リストulに説明文を追加したいなら説明リストdlを使おう

ul・olのリストタグを使用したリストに説明文を追加したい場合、代わりにdl・dt・ddタグを使用して説明文を記述できる「説明リスト」を使用しましょう。

リストに説明文を追加したい場合とは？
説明リストdl・dt・ddタグを使おう
1. 説明リストdl・dt・ddタグとは？
2. dl・dt・ddタグのコード記述
説明リストのCSSが備わってない場合
まとめ

リストに説明文を追加したい場合とは？

例えば人気の果物としてりんご、みかん、バナナを簡単に解説するとします。

見出しタグだと大きすぎる

H5やH6を使った場合はまだ形になるんですが、これをマークアップ上浅い階層で、例えばH2やH3を使用するとします。

<h2>人気の果物</h2>
<h3>りんご</h3>
<p>赤くて甘い果物。</p>
<h3>みかん</h3>
<p>オレンジの甘い果物。</p>
<h3>バナナ</h3>
<p>黄色くて甘い果物。</p>

当サイトであればこのように表示されてしまいます。

ちょっとした説明を添えたい場合に仰々しすぎます。

リストに説明文を追加すると丁度いい

もう少し階層に左右されず見やすい表現として、今まで私はul・olのリストタグを使用していました。

<ul>
<li><strong>りんご</strong></li>
<p>赤くて甘い果物</p>
<li><strong>みかん</strong></li>
<p>オレンジの甘い果物。</p>
<li><strong>バナナ</strong></li>
<p>黄色くて甘い果物。</p>
</ul>

しかし、調べてみたところHTML5のタグの「入れ子のルール」では、ul・ol直下の子要素にp要素を入れてはいけないことがわかりました。

またWordPressのブロックエディタだと、そもそも機能的にli要素の間にp要素を入れることができませんでした。

テーブルはスマホと相性が悪い

表現的にはテーブルでも問題ないように思いますが、例えばちょっとした注意書きの場合などはテーブルは合わないと思います。

またテーブルはスマホと相性が悪く、作成するたびにスマホ表示を確認する必要があるため手間がかかってしまいます。

テーブルはこれは表にしたほうが理解しやすいだろう、そういった場合に使用するものだと思います。

説明リストdl・dt・ddタグを使おう

さて、どうしたものかとさらに調べると、リストに説明文を追加できる、まさに希望通りのリストタグがあることがわかりました。

それが説明リストdl・dt・ddタグです。

説明リストdl・dt・ddタグとは？

説明リストとはリストに説明文を追加できるリストタグです。そのままですね。

説明リストはul・olの代わりにdlで囲んで、liの代わりにdtを使用、説明文にddタグを使用ます。

dl（description list）: 説明リスト。ul・olみたいなもので説明文が必要なときにdlを使います。
dt（description term）: 説明するテキスト。liみたいなもので、説明文が必要なときにdtを使います。
dd（definition description）: 説明文。この部分に解説テキストを追加できるのが説明リストの特徴です。

Sho

はい、今説明リストを使いました。dl・dt・ddタグを説明するために使いました。どうですか、便利じゃないですか？

dl・dt・ddタグのコード記述

<dl>
<dt>りんご</dt>
<dd>赤くて甘い果物。</dd>
<dt>みかん</dt>
<dd>オレンジの甘い果物。</dd>
<dt>バナナ</dt>
<dd>黄色くて甘い果物。</dd>
</dl>

これで目的の表現ができました。見出しやテーブルと違って、ちょっとした説明にとても役立ちます。

外観が当サイトのulリストにそっくりなのは、私がCSSで全く同じく見えるようカスタマイズしたからです。

これがしたかったんです。

説明リストのCSSが備わってない場合

使用しているWordPressテーマによっては説明リストのデザイン（CSS）がない可能性があります。

その場合はこちらのCSSを使用してください。

dl {
    padding: 1em 1em 1em 2.5em;
}
dt {
    display: list-item;
    font-weight: bold;
}
dt, dd {
    font-size: .95em;
    line-height: 1.6;
    padding: .4em 0;
}

枠線がないこと以外は当サイトのデザインと同じものです。