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

  1. ホーム
  2. HTML・CSS
  3. 応用43. dl要素、dt要素、dd要素-定義型(関連)リスト

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

  1. 公開日:2016年07月19日
  2. 最終更新日:2022年08月08日

HTML・CSS

この記事をシェアする:

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

定義型リストは箇条書きリスト(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タグ