<dl要素> - 説明付きのリスト
公開日:
dl要素は、説明付きのリストを表す要素です。name-value(名前と値のペア)を1つの項目として、そのリストを作ることができます。dt要素(名前)とdd要素(説明)を組み合わせて使います。
概要
- 名前
- dl (Definition List)
- カテゴリー
- Flow content
- Palpable content: 子要素に1つ以上の名前と値のペアを持つ場合のみ。
- 配置できる場所
- Flow contentが期待される場所。
- コンテンツモデル
- 0個以上の、dt要素とそれに続くdd要素のペア。または、子要素にペアを持つ1個以上のdiv要素。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLDListElement
- デフォルトのスタイル
dl { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; }
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
名前と値のペア
dl要素は、name-value(名前と値のペア)を1つの項目として、それをリスト化できる要素です。名前はdt要素、値はdd要素でマークアップします。説明付きで一覧を作りたい場合に有用です。
dl属性の使用例
<h1>都道府県の説明</h1>
<dl>
<!-- 1つ目の項目 -->
<dt>栃木県</dt>
<dd>栃木県の説明。</dd>
<!-- 2つ目の項目 -->
<dt>埼玉県</dt>
<dd>埼玉県の説明。</dd>
<!-- 3つ目の項目 -->
<dt>東京都</dt>
<dd>東京都の説明。</dd>
</dl>
1つの名前に複数の値
1つの名前に、複数の値を紐づけることができます。dt要素に続くdd要素は全て、最も近い前のdt要素に紐づきます。
dt要素と、複数のdd要素
<h1>都道府県の好きなところ一覧</h1>
<dl>
<!-- 1つ目の項目 -->
<dt>栃木県</dt>
<dd>鬼怒川温泉が好き。</dd>
<dd>東武ワールドスクウェアが好き。</dd>
<!-- 2つ目の項目 -->
<dt>埼玉県</dt>
<dd>東武動物公園が好き。</dd>
<dd>草加のラーメン屋が好き。</dd>
<dd>川越が好き。</dd>
<!-- 3つ目の項目 -->
<dt>東京都</dt>
<dd>お台場が好き。</dd>
<dd>浅草が好き。</dd>
</dl>
複数の名前に1つの値
複数の名前に、1つの値を紐づけることもできます。
dt要素と、複数のdd要素
<h1>旅行でおすすめの都道府県</h1>
<dl>
<!-- 1つ目の項目 -->
<dt>栃木県</dt>
<dt>群馬県</dt>
<dd>温泉がいい。</dd>
<!-- 2つ目の項目 -->
<dt>山形県</dt>
<dt>福井県</dt>
<dt>京都府</dt>
<dd>まだ行ったことがありません…。</dd>
</dl>
div要素
dl要素の子要素は、name-valueを持つdiv要素でも大丈夫です。構造化データをインラインでマークアップする時や、スタイルシートを適用する時に有用です。
dl要素の子要素としてのdiv要素
<h1>都道府県の説明</h1>
<dl>
<div class="aaa">
<!-- 1つ目の項目 -->
<dt>栃木県</dt>
<dd>栃木県の説明。</dd>
</div>
<div class="bbb">
<!-- 2つ目の項目 -->
<dt>埼玉県</dt>
<dd>埼玉県の説明。</dd>
<!-- 3つ目の項目 -->
<dt>東京都</dt>
<dd>東京都の説明。</dd>
</div>
</dl>
CSS
.aaa dt {
color: red ;
}
.bbb dt {
color: blue ;
}
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<dl要素> - 説明付きのリスト</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/dl/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>dl要素は、説明付きのリストです。</p>
<h2>プログラミング言語を紹介</h2>
<dl>
<!-- 1つの名前に1つの説明 -->
<dt>HTML</dt>
<dd>ウェブサイトを作るための、最も基本的な言語。</dd>
<!-- 1つの名前に複数の説明 -->
<dt>PHP</dt>
<dd>初心者にオススメの言語。</dd>
<dd>易しくて取っつきやすい。</dd>
<!-- 複数の名前に1つの説明 -->
<dt>JavaScript</dt>
<dt>Perl</dt>
<dd>取っつきにくい。</dd>
</dl>
</body>
</html>