SYNCER

SYNCER

<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>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>