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

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

      2017/11/12   hatano

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

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

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

入れ子のルール

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

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

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

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

まとめ

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

広告

 - HTML・CSS