この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
更新日時:2026-06-11 07:10:02
タイトル: dl要素
SEOタイトル: HTML dl要素 完全ガイド（定義リスト / dt / dd の使い方とアクセシビリティ・スタイリング）
| この記事の要点 |
要素は「名前と説明」のペアを並べる 定義リスト（Description List）- 1 つの
- 用語集・FAQ・メタデータ・フォームのキャプションなどペア構造のあるものに向く
- 視覚スタイルは CSS（
display:grid / flex）で自由に組める
|
dl 要素とは
（Description List）要素は、「用語」と「その説明」のペアを並べるためのリスト要素です。HTML5 で「Description List（記述リスト）」と再定義され、「キーと値」「名前と説明」「質問と回答」など、ペアの構造を持つ情報全般に使えるようになりました。
3 種類あるリスト要素（
だけは項目が単一の値ではなく 「ペア」になっている点が特徴です。
基本構文
- HTML
- Webページの構造を記述するマークアップ言語。
- CSS
- Webページの見た目を指定するスタイルシート言語。
- JavaScript
- Webページに動きや対話性を加えるプログラミング言語。
子要素の役割
| 要素 | 意味 | 典型的な内容 |
|---|
| Description Term — 用語・名前・キー | 言葉、ラベル、見出し |
| Description Details — 説明・値 | 定義、答え、本文 |
| Description List — リスト全体のコンテナ | — |
HTML5 以降は
でペアをグループ化することも認められています（マイクロデータや CSS Grid と組み合わせやすい）。
複数 dd / 複数 dt のパターン
1 つの用語に複数の説明、または複数の用語に共通の説明を割り当てることもできます。
- クッキー
- ブラウザに保存される小さなデータ。
- ログイン状態の保持や行動追跡に使われる。
- HTTP
- HyperText Transfer Protocol
- WebブラウザとWebサーバ間で情報をやり取りするためのプロトコル。
div でグループ化（HTML5）
各ペアを で括ると、CSS Grid / Flex でレイアウトしやすくなります。
- API
- アプリケーション間でやり取りするためのインタフェース。
- SDK
- 開発キット。ライブラリやサンプル、ドキュメントを含む。
CSS で 2 カラムに整形する
.glossary { display: grid; grid-template-columns: 8em 1fr; gap: 8px 16px; }
.glossary dt { font-weight: bold; }
.glossary dd { margin: 0; }
/* div でグループ化したパターン */
.glossary > div { display: contents; }
典型的なユースケース
- 用語集 / グロッサリ — 「言葉」と「定義」のペア
- FAQ — 「質問」と「回答」のペア（
- メタデータ — 「項目名」と「値」のペア（投稿者・更新日・カテゴリ等）
- 商品スペック — 「スペック名」と「値」（重量、サイズ、価格）
- フォームのラベル + 値 — 入力画面ではなく確認・閲覧画面の表示用
アクセシビリティ
スクリーンリーダーは
を選ぶ必要はありません。「項目とその説明」という意味があるなら
が原則です。
よくある誤用
- 段落の連続を dl で書く — ペア構造でないなら
- 装飾目的のインデント —
margin / padding で表現すべき）
- の中に
- を入れ子
— 構文エラー。
- 表的な集計データを dl で書く — 列ごとの比較が必要なら
が適切
ul / ol / table との使い分け
| コンテンツの形 | 適した要素 | 例 |
|---|
| 順不同の項目列挙 | | 機能の箇条書き、メニュー |
| 順序が意味を持つ項目列挙 |
| 手順、ランキング |
| 「名前 → 説明」のペア |
| 用語集、メタデータ、FAQ |
| 行×列の集計データ |
FAQ
Q: 装飾的なインデントだけ欲しいのですが？
A:
padding-left で表現します。
Q: dt と dd の中に複数段落を書ける？
A:
Q: マイクロデータと組み合わせられる？
A:
itemprop を付与してメタデータを構造化できます。 でグループ化しておくと itemscope を切り分けやすくなります。
関連
|
