[15-3] 記述リストを作ろう( dl dt dd )

今日は、dl(記述リスト)を作りましょう。
リスト項目は、これまでの li ではなく dt と dd を使います。

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

★今回はサンプル無しです。
 このリストはもともとリスト記号や番号が無く、ビジュアル的にはCSSで装飾します。
 それは次回、他のリスト要素も含めてやります。
 

dl dt ddのリストの基本形はこんなかんじ

構造は、dl要素の中に「1つ以上の dt要素(用語の名前) 」と「1つ以上の dd要素(説明) 」
入ってる必要があります。

基本形は下記。

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

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

用語の名前
その説明のための文章を表示します。
用語の名前
その説明のための文章を表示します。
ブラウザのデフォルトのスタイルシートで、dtとddの違いがわかるようになっていますね。
このデフォルトCSSを、サイト側で変更して装飾できます。それは次回。

dl要素で作るリストは、使い勝手がいい

他のリスト(ulとol)は、リストアイテムは li要素だけでした。
dl要素で作るリストには、リストアイテムが2種類あります。
dtが「名前(タイトル)」ddが「その説明」です。

このように中身に「名前」と「説明」の2種類があるおかげで、いろんな使い道が生まれます。
例えば、
・辞書のように、用語の説明をする(上記の基本形のように)
・FAQのように、質問と答えを表示する
・サイトマップのように、ページタイトルとその内容を表示
・更新記録のように、日付と更新内容を表示

いろんなところに使えて便利です。

dl要素のHTML5での変更点

以前は、dl要素は definition list (定義リスト) とされていました。
で、definition term (dt) と definition description (dd) から構成されるとされてました。
HTML5からは、dl要素は description list になったそうで、内容は「名前と値のグループからなるリスト」ってことに変わったそうです。

リスト項目である「dt」「dd」の呼び方はどう変わったんだろう? dlが変わったので。
dtは description term でいいかもですが、ddは description description になっちゃいますね。まいっか。

そして、HTML5では、下記ができるようになりました。
●1つのdt要素に対して複数のdd要素を指定できる
●複数のdt要素に対して1つのdd要素を指定できる
●複数のdt要素に対して複数のdd要素を指定できる
このあとの章で↓具体例を書きます。

dt要素 は用語を「定義する」という役目があったのですが、HTML5からこの役目は無くなります。
で、dtの中身を「定義語」として示すには、dt要素のなかにさらに「dfn要素」を入れ子にします。この「dfn要素」については後日。

<dfn>(定義語を表す要素)についてアップしました。
[30] 定義語を示す dfn を、abbr や dt と一緒に使おうをご覧ください。(2011.09.20追記)

それから、このリストは「会話(対話)」の表現にも使えるとされてきたのですが、 HTML5から、会話には p要素を使うことが奨励されているそうです。インタビュー記事とかをサイトに書くときに、dlじゃなくてpを使えってことですね。

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>

次回予告

次回は、リスト要素をメニューに使ってみましょう。CSSでメニューらしく装飾していきますよ。

サイドメニューなどで、リスト要素がよく使われていますので、
知っておくと編集がしやすくなります。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

No title

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

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

Re: No title

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