dl dt ddとは
まずはdl dt ddとは何かということについて簡単におさらい。
dl dt ddとは、1つ以上のdt要素とそれを説明するdd要素のグループです。
定義リスト(dl dt dd)
HTML5以前は、dl（=definition listの略）は定義リストを表す要素でした。
- 要素名
- 意味
- dl
- 定義リスト(description list)
- dt
- 定義する用語(description term)
- dd
- 定義の説明(discription difinition)
定義リストって何？
辞書をイメージするとわかりやすいかな。
用語説明型リスト(dl dt dd)
dl dt ddは、HTML5から説明リストという意味に変わり、より柔軟な用途でコーディングできるようになりました(´ω`)✧
- 要素名
- 意味
- dl
- 説明リスト(description list)
- dt
- 用語(description term)
- dd
- 説明や定義(discription difinition)
定義リストとしても使えるの？
もちろん！用途が広がったと理解すればOK♡
主な使い道
用語とその用語に対しての説明をセットで繰り返す箇所に使います。
- 用語集
- よくある質問
- 会社概要
- お問い合わせフォーム
dl dt ddテーブル完成イメージ
dl dt ddの説明リスト（旧定義リスト）がテーブルみたいに表示できたらいいのにと思ったことはありませんか？
ここではdl dt ddの説明リスト（旧定義リスト）で作る2列のレスポンシブテーブルのコピペを紹介します。
スマホだと上下表示になるよ。
- 定義する用語（definition term）
- 用語の説明（description definition）
- 定義する用語（definition term）
- 用語の説明（description definition）
- 定義する用語（definition term）
- 用語の説明（description definition）
html
Word PressではCSSが干渉しやすいので、クラスをつけた方が扱いやすいよー。
1 2 3 4 5 6 7 8 9 10 | <div class="definition"> <dl> <dt>定義する用語</dt> <dd>内容</dd> <dt>定義する用語</dt> <dd>内容</dd> <dt>定義する用語</dt> <dd>内容</dd> </dl> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* レスポンシブ2列テーブル */ .definition dl{ display:flex; flex-wrap: wrap; border: 1px solid #ccc; border-top: none; } .definition dt{ background: #e1f0ff; width: 30%; padding: 10px; box-sizing: border-box; border-top: 1px solid #ccc; } .definition dd{ padding: 10px; margin: 0; border-left: 1px solid #ccc; border-top: 1px solid #ccc; width: 70%; background: #fff; box-sizing: border-box; } @media screen and (max-width: 560px) { .definition dl{ flex-flow: column nowrap; } .definition dt, .definition dd{ width: 100%; } .definition dd{ border-left: none; } } |
余談dl dt ddの説明リスト（旧定義リスト）の思い出
その昔、納品後に
「htmlにミスがありましたよ。こちらで修正しました。」
どこですか？（ちゃんと表示されているのに？？）
「直したので大丈夫です！」
（どこって聞いてるのに....。）
そのあと、再び連絡がきました。
「サイトが壊れてます。」
見てみますね。
見てみると、dl dt ddの説明リスト（旧定義リスト）が崩壊していました。
ソースを見ると、
1 | <dl></dl> |
が消えていたという...。
そのことを知らせたら、「その部分はいらないって書いてあったんですよ！」
という謎回答。
どこに書いてあったのさ 笑
自分でもhtmlは書けるんですよ！とよく言っていた方だったので認めたくなかったんだろうなぁ(´°ω°) 笑
