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

最終更新日:2017年10月01日  (初回投稿日: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)」を表示します。

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>

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

No title

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

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

Re: No title

わ、ほんとだ。
早速リンク修正いたしました。
ありがとうございます! (*^_^*)
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.