[15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）

前回から引き続き リストを表示する要素 です。

リストには「ul（Unordered List）」「ol（Ordered List）」「dl（Description List）」がありますが、
今回は、dl（ Description List = 説明リスト）を使ってみよう。
dl でのリスト項目は、これまでの <li> ではなく <dt> と <dd> を使います。

使用する要素	<dl> 〜 </dl> <dt> 〜 </dt> <dd> 〜 </dd>

ちなみに、
dt は「definition term（定義用語）」の略、dd は「definition description（定義の説明）」の略と言われてきました。
これは dl が「definition list （定義リスト）」とされていたころの名前。
HTML5からは、dl は 「description list（説明リスト）」になり、内容は「名前（name）と値（value）のグループからなるリスト」に変わったそうです。
「dt」「dd」の名称は、特に新しく意味付けされていないようです。
とにかく、dt は「名前（name）」、dd は「値（value）」を表示します。

● 2018年3月：HTML5.2 仕様から、<dl>要素内に <div>要素も入れられるようになった件をを追加しました。

dl要素でのリストの基本形はこんなかんじ

dl要素の中に 1つ以上の dt要素 と 1つ以上の dd要素 が 入っている必要があります。

<dl>
  <dt>用語の名前</dt>
  <dd>その説明のための文章を表示します。</dd>
  <dt>用語の名前</dt>
  <dd>その説明のための文章を表示します。</dd>
</dl>

上記のHTMLソースをブラウザで見ると、このようになります。

用語の名前

その説明のための文章を表示します。

用語の名前

その説明のための文章を表示します。

dl要素のHTML5での変更点

役割が変わった（定義する→単なる説明に）

以前は、dl要素は definition list （定義リスト）とされていました。
で、definition term（定義用語 = dt）と definition description (定義の説明 = dd) で構成するとされてました。

HTML5からは、dl要素は description list（説明リスト） になったそうで、内容は「名前（name）と値（value）のグループからなるリスト」に変わったそうです。

「dt」「dd」が何の略かは、特に新しく意味付けされていないようです。

<dt>要素 は「用語を定義する役割」でしたが、HTML5からこの役割は無くなります。
「用語を定義する役割」は <dfn>要素が担うから。
<dt>要素 の内容を「定義語」として示したければ、内容を <dfn>要素で囲みます。

<dfn>（定義語を表す要素）については、
[30] 定義語を示す dfn を、abbr や dt と一緒に使おうをご覧ください。

それから、このリストは「会話（対話　インタビュー記事とか）」の表現にも使えるとされてきたのですが、 HTML5から、会話には <p>要素を使うことが奨励されています。

使い方が変わった

そして、HTML5では、下記の使い方ができるようになりました。
●1つの dt要素に対して複数の dd要素を指定
●複数の dt要素に対して1つの dd要素を指定
●複数の dt要素に対して複数の dd要素を指定

dl 要素の使い方の例をいろいろ

1つのdt要素に複数のdd要素がある例：更新記録などに使えますね。

<dl>
  <dt>2011年5月20日</dt>
    <dd>プレゼント当選者を発表しました。</dd>
    <dd>スタッフブログを更新しました</dd>
  <dt>2011年5月16日</dt>
    <dd>特集ページを更新しました</dd>
</dl>

サイドメニューなどにも、このdt１つに複数のddはよく使います。

<dl>
  <dt>最新記事</dt>
    <dd>GIFとJPEGの違い</dd>
    <dd>ブラウザでソースを見る</dd>
    <dd>CSSでグラデーションを作ってみよう</dd>
  <dt>カテゴリ</dt>
    <dd>はじめてのHTML</dd>
    <dd>追加修正</dd>
    <dd>はじめに</dd>
</dl>

複数のdt要素に1つのdd要素がある例：同じ意味の２つの用語の説明に。

<dl>
  <dt>ヴィーナス</dt>
  <dt>アプロディテ</dt>
  <dd>愛と美の女神。ローマ神話のヴィーナスは、ギリシャ神話のアプロディテと同一視される。</dd>
</dl>

複数のdt要素に複数のdd要素がある例：FAQとか。

<dl>
  <dt>ログインできません</dt>
  <dt>パスワードを忘れました</dt>
  <dd>○年○月以前に登録のお客様は再登録が必要です。登録ページにお進みください。</dd>
  <dd>○年○月以降に登録のお客様は、サポートページをご覧ください。</dd>
</dl>

ul要素を入れ子にすることもできます：ブログのサイドメニューなど。

<dl>
  <dt>最新記事</dt>
  <dd>
      <ul>
      <li>GIFとJPEGの違い</li>
      <li>ブラウザでソースを見る</li>
      <li>CSS3でグラデーション</li>
      </ul>
  </dd>
    <dt>カテゴリ</dt>
  <dd>
      <ul>
      <li>はじめてのHTML</li>
      <li>追加修正</li>
      <li>はじめに</li>
      </ul>
  </dd>
</dl>

dl要素のHTML5.2での変更点

中に <div>要素も入れられる

2017年12月に勧告になった HTML5.2 では、<dl>要素のコンテンツ・モデルはこのようになっています。

Either:Zero or more groups each consisting of one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with script-supporting elements.
Or: One or more <div> elements, optionally intermixed with script-supporting elements.

直訳：
1つ以上の<dt>要素とそれに続く1つ以上の<dd>要素からなるゼロ個以上のグループ。必要に応じてスクリプトをサポートする要素を含む。
または、1つ以上の<div>要素。必要に応じてスクリプトをサポートする要素を含む。

ということで、<dl>要素の中には、<dt> <dd>要素だけじゃなく、<div>要素も入れられるようになりました。

こんなかんじで、<dt> <dd>要素を <div>要素でグルーピングできて便利です。

用語の名前

その説明のための文章を表示します。

用語の名前

その説明のための文章を表示します。

上のサンプルのHTMLです。

<dl class="sampleDl">
  <div>
    <dt>用語の名前</dt>
    <dd>その説明のための文章を表示します。</dd>
  </div>
  <div>
    <dt>用語の名前</dt>
    <dd>その説明のための文章を表示します。</dd>
  </div>
</dl>

上のサンプルのCSSです。

.sampleDl {
	margin:1em 0;
	padding:0;
	border:1px solid #ebe6dc;}
.sampleDl div {
	background:#ebe6dc;
	margin:.7em;
	padding:.7em;
	border-radius:8px}
.sampleDl dt {
	font-weight: bold;
	margin-bottom: 0.5em;
	padding-bottom: 2px;
	border-bottom: 1px solid white;}
.sampleDl dd {margin:0 0 0 1em;}

次回予告

次回は、<li>要素のリストマーカーを「画像」や「任意のテキスト」に置き換える方法を見てみましょう。CSSを使います。
あらかじめ用意されている記号ではなく、オリジナルなものに差し替えたいときに便利です。