HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用43. dl要素、dt要素、dd要素-定義型(関連)リスト

      2017/11/12   hatano

定義型(関連)リストとは

定義型リストは箇条書きリスト(ul要素、li要素)と違い、「見出し」と「段落」に似た構造をつくることができます。見出しタグを使うほどではないが、リスト構造で見出しが必要な場合に使用できます。
構成としてはdl要素(Definition List)内に「用語」であるdt要素(Definition Term)と「用語の説明」であるdd要素(Definition Description)で定義します。


<dl>
	<dt>用語</dt>
	<dd>用語の説明</dd>
</dl>

dl要素、dt要素、dd要素の初期値はdisplay:block;です。
箇条書きリストのような行頭マーカーの指定はできません。

入れ子のルール

  • dlタグ内の子要素は、dtタグ、ddタグのみ。  
    ただし、dtタグ、ddタグ内は他の要素を使用できる。
  • dtタグ、ddタグを必ず1回使用する。
  • dtタグの次にddタグを使用する。
  • dlタグ内にdtタグ、ddタグはいくつ使用しても良い。

間違った使用方法として、下記のようなものがあります。


<!-- dl要素の子要素がdiv -->
<dl>
	<div>
		<dt>用語</dt>
		<dd>用語の説明</dd>
	</div>
</dl>


<!-- dd要素が先にある -->
<dl>
	<dd>用語の説明</dd>
	<dt>用語</dt>
</dl>

下記の使い方は問題ありません。


<!-- dd要素が複数ある -->
<dl>
	<dt>用語</dt>
	<dd>用語の説明</dd>
	<dd>用語の説明</dd>
	<dd>用語の説明</dd>
</dl>


<!-- 交互に用語と説明を入れる -->
<dl>
	<dt>用語</dt>
	<dd>用語の説明</dd>
	<dt>用語</dt>
	<dd>用語の説明</dd>
	<dd>用語の説明</dd>
</dl>


<!-- 商品の説明 -->
<dl>
	<dt>商品名</dt>
	<dd><img src="item.jpg" alt="商品画像"></dd>
	<dd>
		<ul>
			<li>商品の説明</li>
			<li>商品の在庫数</li>
			<li>商品の大きさ</li>
		</ul>
	</dd>
</dl>

下記のように「日付」と「その日の出来事」のようなパターンにも使えます。


<!-- 日付と説明 -->
<dl>
	<dt>2016/7/1</dt>
	<dd>新商品を入荷しました。</dd>
	<dt>2016/7/2</dt>
	<dd>ブログを更新しました。</dd>
</dl>

まとめ

  • 定義型リストは、「見出し」と「段落」に似た構造をつくることができる
  • dlタグ内の子要素は、必ずdtタグとddタグ