<dl>タグの解説
<dl>は、何らかの用語と説明をセットにした定義リストを表します。「dl」とは、英語で「Definition List」の頭文字を取った略語です。
定義リストは、用語を表す<dt>と説明を表す<dd>のセットで作ります。この二つの要素はペアとして扱われます。HTML Living Standardでは、それらをグループ化するために<div>で囲うことも許可されています。
定義リストの分かりやすい例としては、単語帳や名簿のようなものが挙げられます。プログラミング的な言葉で言えば、キーと値のペアになる文脈で使えます。
<dl>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<dl>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<dl>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。定義リストを取り扱う場合、必ず三つの要素をセットで使います。
<dl>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</dl>
一つの定義リストに複数の用語と解説をセットで配置することもできます。一つの用語を定義するたびに、いちいち<dl>要素を閉じなくても、続けて記述すれば各用語と解説はペアとして扱われます。
<dl>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</dl>
<dt>と<dd>は名前の綴りが似ているため、書き間違いやタグの閉じ忘れがよく起こります。HTML Living Standardでは<div>で囲うことが許可されているため、できるだけひとつにまとめることを推奨します。ソースコードの視認性が高まり、CSSも柔軟に適用できるようになります。可能であれば以下のパターンを採用して下さい。
<dl>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の解説。</dd>
</div>
</dl>
ひとつの定義語に複数の説明を与える
定義語に対して複数の説明を加えることができます。諸説ある人物評や歴史年表に見られる構成です。
<dl>
<div>
<dt>定義された用語</dt>
<dd>用語の説明１</dd>
<dd>用語の説明２</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明１</dd>
<dd>用語の説明２</dd>
</div>
</dl>
複数の定義語をひとつの説明に対応させる
複数の定義語をひとつの説明でまとめることも可能です。同一の出典を持つ格言や、複数のニックネームを持つキャラクターなど、同一の内容が重複するリストで活用できます。
<dl>
<div>
<dt>用語１</dt>
<dt>用語２</dt>
<dd>用語の説明</dd>
</div>
<div>
<dt>用語３</dt>
<dt>用語４</dt>
<dd>用語の説明</dd>
</div>
</dl>
定義リストをCSSで装飾する
CSSを使って定義リストの装飾を行ってみましょう。定義リストのデザインパターンは、大きく分けて縦並びと横並びの二種類があります。以下の例は、displayプロパティをflexに変えるパターンです。
サンプルの横幅を変えると、折り返しで改行が発生した時の表示を確認できます。右下のハンドルをドラッグして動かしてみましょう。
<div class="block-group">
<h2>横並びの定義リスト</h2>
<dl>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の説明。用語の説明。用語の説明。用語の説明。</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の説明。用語の説明。用語の説明。</dd>
</div>
<div>
<dt>定義された用語</dt>
<dd>用語の説明。用語の説明。用語の説明。</dd>
</div>
</dl>
</div>
.sample-block {
padding: 1rem;
border-radius: 5px;
background-color: #eee;
resize: horizontal;
overflow: auto;
}
.sample-block h2 {
margin: 0;
border-block-end: 1px solid;
font-size: 1rem;
}
.sample-block dl div {
display: flex;
flex-direction: row;
padding-block: 0.5em;
border-block-end: 1px dotted #ccc;
}
.sample-block dt {
flex-shrink: 0;
flex-basis: 20%;
min-inline-size: 5em;
max-inline-size: 10em;
margin-inline-end: 1rem;
}
.sample-block dd {
margin: 0;
}
縦並びの場合のデザイン・パターンです。flex-directionプロパティの値を変更してボックスの並ぶ方向を変えます。HTMLの構造は変わりません。
.sample-block {
padding: 1rem;
border-radius: 5px;
background-color: #eee;
resize: horizontal;
overflow: auto;
}
.sample-block h2 {
margin: 0;
border-block-end: 1px solid;
font-size: 1rem;
}
.sample-block dl div {
display: flex;
flex-direction: column;
padding-block: 0.5em;
border-block-end: 1px dotted #ccc;
}
.sample-block dt {
margin-block-end: 0.5em;
text-decoration: underline;
text-underline-offset: 3px;
}
.sample-block dd {
margin: 0;
}
ひとつのサイトで複数のデザインを使い分ける場合は、共通のスタイルを用意して必要な箇所だけスイッチできるようにします。以下の例は、横並びに必要なプロパティと縦並びに必要なプロパティを分けて、親要素のクラス名だけで変更できるようにしています。
// 横並びの定義リストを表示する場合
<dl class="row">
// 縦並びの定義リストを表示する場合
<dl class="column">
/* 共通のスタイル */
.sample-block div {
display: flex;
padding-block: 0.5em;
border-block-end: 1px dotted #ccc;
}
.sample-block dt {
flex-shrink: 0;
margin-inline-end: 1rem;
}
.sample-block dd {
margin: 0;
}
/* 横並びの指定 */
.sample-block dl.row div {
flex-direction: row;
}
.sample-block dl.row dt {
flex-basis: 20%;
min-inline-size: 5em;
max-inline-size: 10em;
}
/* 縦並びの指定 */
.sample-block dl.column div {
flex-direction: column;
}
.sample-block dl.column dt {
margin-block-end: 0.5em;
text-decoration: underline;
text-underline-offset: 3px;
}