Yugien - 遊戯苑
テーマ

HTML

この記事では、用語や名前を<dt>、その説明や値を<dd>で表す説明リスト<dl>の基本と、箇条書きリストとの違いを初心者向けに説明します。

この記事でわかること

The <dl> element in HTML is used to create a description list by pairing a term (<dt>) with its description (<dd>).

dl 要素

<dl>要素とは？

<dl>（Description List）は、名称と値のペアを列挙するためのリスト要素です。HTML4までは「定義リスト（Definition List）」と呼ばれていましたが、現在は仕様上「説明リスト」とされています。MDNなどの文書でも “Description list” の呼称が採用されています。

基本構造

<dl> 内には、用語や名称を表す <dt>（description term）と、その説明や値を表す <dd>（description detail）が対で入ります。

コード例

HTML

<dl>
	<dt>HTML</dt>
	<dd>Webページを構造化するためのマークアップ言語。</dd>
	<dt>CSS</dt>
	<dd>Webページの見た目を装飾するためのスタイルシート言語。</dd>
</dl>
HTML
Webページを構造化するためのマークアップ言語。
CSS
Webページの見た目を装飾するためのスタイルシート言語。

複数対応の例

HTML

<dl>
	<dt>HTTP</dt>
	<dt>HyperText Transfer Protocol</dt>
	<dd>WebブラウザとWebサーバー間で通信を行うためのプロトコル。</dd>
</dl>
HTTP
HyperText Transfer Protocol
WebブラウザとWebサーバー間で通信を行うためのプロトコル。

<dl>要素の基本的な使い方

どのような場面で使う？

用語集や用語解説
用語や略語がたくさん出てくるWebサイトで、各用語に対して説明を付けたい時に便利です。
FAQでの利用例
<dt> を質問、<dd> を回答としてFAQ形式にするのは一般的なパターンです。

HTML

<dl>
	<dt>返品は可能ですか？</dt>
	<dd>商品到着から7日以内であれば可能です。</dd>
</dl>
メニューと価格一覧
レストランのサイトなどで、メニュー名（<dt>）と価格や説明（<dd>）を組み合わせるケースもあります。

<ul>や<ol>との違い

たとえば「見出しと段落のように構造を分けて表現したい」「用語とその補足情報をはっきり示したい」ときに<dl>を使うと、HTML文書の意味づけ（セマンティクス）が分かりやすくなります。

より深い活用方法と注意点

グルーピング（<div>の使用）

HTML仕様では、<dt>群と<dd>群をまとめて<div>で包むことが許可されています。これにより、スタイルをまとめて適用したり、マイクロデータやグローバル属性を一括で付与できます。意味論は変わらず、表示やデータ構造の整理に便利です。

HTML

<dl>
	<div>
		<dt>CPU</dt>
		<dd>Intel Core i7</dd>
	</div>
	<div>
		<dt>RAM</dt>
		<dd>16GB</dd>
	</div>
</dl>
CPU
Intel Core i7
RAM
16GB

※ グルーピングしても意味論は変わりません。見た目は通常変わりませんが、スタイル指定やブラウザ差によって表示が変化する場合があります。

入れ子構造（ネスト）について

入れ子は「禁止」ではありません。意味が明確な階層構造を表す場合は有効で、特に<dd>の中に補助的な<dl>を入れるのは妥当です。ただし、階層が深くなりすぎると可読性や理解が低下するため注意が必要です。

HTML

<dl>
	<dt>プログラミング言語</dt>
	<dd>
		<dl>
			<dt>JavaScript</dt>
			<dd>Webブラウザで動作するスクリプト言語。</dd>
			<dt>Python</dt>
			<dd>汎用性の高いスクリプト言語。</dd>
		</dl>
	</dd>
</dl>
プログラミング言語
JavaScript
Webブラウザで動作するスクリプト言語。
Python
汎用性の高いスクリプト言語。

スタイリングとカスタマイズ

多くのブラウザには、<dl>・<dt>・<dd>に既定のユーザーエージェント（UA）スタイルが設定されています。例えば、<dd>にはインデント（字下げ）が付き、<dl>には上下のマージンが付く場合があります。これらはブラウザによって差がありますが、すべてCSSで自由に変更可能です。

横並びレイアウトの例

HTML

<dl>
	<dt>タイトル</dt>
	<dd>サンプルとなる説明文です。</dd>
	<dt>別のタイトル</dt>
	<dd>別の説明文も同様に並べられます。</dd>
</dl>

CSS

dl {
	display: grid;
	/* 左右2列に分ける。左列は固定幅、右列は残りのスペースを使う例 */
	grid-template-columns: 120px 1fr;
	/* 縦と横の隙間を調整 */
	gap: 0.5em 1em;
	margin: 0;
	padding: 0;
}

/* 用語側のスタイル */
dt {
	text-align: right;    /* 見やすいように右寄せ */
	font-weight: bold;    /* 強調表示 */
	margin: 0;
}

/* 説明側のスタイル */
dd {
	margin: 0;
}
タイトル
サンプルとなる説明文です。
別のタイトル
別の説明文も同様に並べられます。

ポイント

grid-template-columns
ここでは、用語（dt）を120pxの固定幅、説明（dd）を残りの幅いっぱいに割り当てています。必要に応じて割合指定 (2fr 3fr など) に変えることも可能です。
gap
行間や列間の余白を自由に調整できます。gap: 0.5em 1em;は「行間：0.5em、列間：1em」を指定しています。
レスポンシブ対応
固定幅の120pxが小さいデバイスでは圧迫感を与える場合があります。メディアクエリを用いて、画面幅が狭いときは1カラム表示にするなどの工夫をするとより使いやすくなります。

このようにCSS Gridを用いると、テーブルではなく純粋なリスト要素のまま、シンプルかつ柔軟にレイアウトを組めるようになります。ブラウザの対応状況も比較的広いため、より自然に「用語→説明」の関係を見せたい場合に便利です。

アクセシビリティとセマンティクス

アクセシビリティのポイント

<dt>と<dd>の対応関係は順序が重要です。関連する<dt>群の直後に対応する<dd>群を置くことで、スクリーンリーダーなどの支援技術が正しい対応関係を把握できます。構造を守ることが、利用者へ正確に情報を伝える近道です。

意味的に正しい使い方を心がける

<dl>はあくまでも用語（<dt>）と説明（<dd>）のペアを表現するために用いるのが基本です。意味的に正しくない使い方は避けましょう。例えば、単に複数行に渡る文章を<dd>で区切りたいだけなら、<dl>ではなく<p>や<div>を使うほうが適切です。

応用的な活用アイデア

商品リスト・スペック表などへの活用

商品名（<dt>）と詳細・価格（<dd>）
やや強引ですが、ECサイトの商品ページなどで活用可能です。<dl>を使うことで、商品名とその詳細説明を明確に紐づけられます。
スペック（<dt>）と値（<dd>）
パソコンやスマートフォンのスペック一覧を<dl>で作ると、各スペック項目とその値が対になり、セマンティクス的にも正しい形で表現できます。

HTML

<dl>
	<dt>CPU</dt>
	<dd>Intel Core i7</dd>
	<dt>RAM</dt>
	<dd>16GB</dd>
	<dt>ストレージ</dt>
	<dd>512GB SSD</dd>
</dl>
CPU
Intel Core i7
RAM
16GB
ストレージ
512GB SSD

SEOとの関係

<dl>自体が直接SEO評価を高めるわけではありませんが、情報の意味が明確になるため検索エンジンが内容を理解しやすくなり、間接的な効果は期待できます。

発展的ユースケース

構造化データ（microdata）との組み合わせ

<dl> は「名前と値のペア」を表すため、構造化データのマークアップにも自然に適しています。

特に、schema.org の語彙と microdata 属性（itemscope、itemtype、itemprop）を組み合わせることで、検索エンジンに意味情報を正確に伝えられます。

以下は人物プロフィール情報を表すシンプルな実例です。

HTML

<dl itemscope itemtype="https://schema.org/Person">
	<dt>Name</dt>
	<dd itemprop="name">Taro Yamada</dd>

	<dt>Job Title</dt>
	<dd itemprop="jobTitle">Web Developer</dd>

	<dt>Email</dt>
	<dd>
		<a href="mailto:[email protected]" itemprop="email">[email protected]</a>
	</dd>

	<dt>Website</dt>
	<dd>
		<a href="https://example.com" itemprop="url">https://example.com</a>
	</dd>
</dl>
Name
Taro Yamada
Job Title
Web Developer
Email
[email protected]
Website

このように、見た目は通常の定義リストとして表示されますが、HTML内に機械可読な意味情報が埋め込まれます。

検索エンジンや他のシステムが情報を正しく理解できるため、プロフィールページや会社概要などで特に有効です。

必要に応じて項目を追加し、itemprop の値は schema.org/Person の定義に沿って設定します。

多言語対訳リスト

<dl> を使えば、用語やフレーズの多言語訳を見やすくまとめられます。

1つの <dt> に複数の <dd> を対応させることで、同じ語の各言語での訳を並べることができます。

HTML

<dl>
	<dt>Hello</dt>
	<dd>こんにちは（日本語）</dd>
	<dd>Bonjour（フランス語）</dd>
	<dd>Hola（スペイン語）</dd>
</dl>
Hello
こんにちは（日本語）
Bonjour（フランス語）
Hola（スペイン語）

インタラクティブなFAQ／チュートリアル

<dl> 要素と <details> 要素を組み合わせると、質問と回答をインタラクティブに開閉できるFAQや、手順を順に開いていくチュートリアルを構築できます。

セマンティクス的には「質問（<dt>）」と「回答（<dd>）」の関係を保ちながら、ユーザー体験を向上させられる方法です。

HTML

<dl>
	<dt>
		<details>
			<summary>返品は可能ですか？</summary>
			<dd>商品到着から7日以内であれば可能です。</dd>
		</details>
	</dt>

	<dt>
		<details>
			<summary>海外発送は対応していますか？</summary>
			<dd>現在は日本国内のみの発送となります。</dd>
		</details>
	</dt>
</dl>
返品は可能ですか？
商品到着から7日以内であれば可能です。
海外発送は対応していますか？
現在は日本国内のみの発送となります。

<details> / <summary> の組み合わせにより、JavaScriptなしで開閉動作が可能です。質問文をクリックすると対応する回答が展開されるため、FAQページや段階的な説明コンテンツに最適です。