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

最終更新日:2018年03月31日  (初回投稿日:2011年06月02日)

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

リストには「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>

サイドメニューなどにも、このdt1つに複数の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要素がある例:同じ意味の2つの用語の説明に。

<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を使います。
あらかじめ用意されている記号ではなく、オリジナルなものに差し替えたいときに便利です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

No title

[30] <dfn>で定義語を示そうをご覧ください。(2011.09.20追記)

上のリンクを押しても[30]に飛ばずこのページに戻ってきてしまいます^^

Re: No title

わ、ほんとだ。
早速リンク修正いたしました。
ありがとうございます! (*^_^*)
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.