テクノロジー観測所

Technology Observatory(テクノロジー観測所)は"初心者を卒業した(い)"人を対象とする情報サイトです。

定義リスト「DL」「DT」「DD」タグの使い方

この記事は約5分14秒で読めます

HTML初心者にとって「リスト」といえばUL(箇条書き)かOL(番号付き)になるかと思いますが、もう1つ、定義リストというタグがあります。

Definition Listのイニシャルを取って<dl>タグとなっています。

リストタグの書き方

普通のリストであればULタグ、番号付きリストの場合はOLタグを使いますが、その構造は極めてシンプルなものです。

ULタグの書き方
<ul>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
</ul>

まず「ここからここまでをリスト化するよ」という宣言のため、リスト全体を<ul>タグで囲みます。

次に「ここからここまでで項目ひとつだよ」という宣言のため、リストの項目1つ1つを<li>タグで囲みます。

たったこれだけ。

番号付きリストの場合、<ul>部分が<ol>と置き換わるだけです。

OLタグの書き方
<ol>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
  <li>ホニャララ</li>
</ol>

こんなふうになりますよね。

ところが定義リスト<dl>タグはもう1つセンテンスを持っています。

DLタグの特徴

DLタグの書き方
<dl>
  <dt>名前</dt>
    <dd>説明<dd>
</dl>

このように、リスト領域を定義する<dl>タグの中に<dt>と<dd>タグの2つを表記できます。

また定義リストの便利な点として、内側の2つのタグは両方必須ではない、という部分も覚えておきましょう。

こういう書き方でもOK
<dl>
  <dt>名前</dt>
    <dd>説明<dd>
  <dt>名前</dt>
    <dd>説明<dd>
    <dd>説明<dd>
</dl>

こんなふうに、1つのdlの中に複数の組み合わせを入れたり、ddが何個か続いてもいいんです。リストタグでありながら<table>に近い特徴を持っていると捉えることもできるかもしれませんね。

定義リストの使い道

定義リストはいわゆるQ&Aのように、リストのそれぞれ(DTとDD)に異なる意味を持たせられるところが特徴です。

「これは(DT)」「こういうものだよ(DD)」という構造をリストアップ形式で表示できるので、その用途で使うのが好ましいと思います。

たとえば、テクノロジー観測所ではソースコードの表示を行う時に定義リストを使っています。

HTML部分
<dl class="simple_style">
<dt>HTML部分</dt>
<dd>

<pre><code>

<!-- ここにソースコードを記述 -->

</code></pre>
</dd>
</dl>

<pre><code>タグにCSSが入るので緑色のボーダーや背景色などがつきます。

箇条書きしたテキストに補足説明をつける時に便利

<ul><ol>タグを使う場合、項目の間に補足を加えることは困難です。

買い物リストの例
<ul>
  <li>しょうゆ1L</li>
  <li>無洗米1キロ</li>
  <li>卵1パック</li>
  <li>豆腐2パック</li>
</ul>
HTMLでの表示
  • しょうゆ1L
  • 無洗米1キロ
  • 卵1パック
  • 豆腐2パック

このようなリストを作ったとします。

<ul>タグを使う場合、項目に補足説明をつける時は次のようにマークアップすることになるはずです。

買い物リストに補足をつけた例
<ul>
  <li>しょうゆ1L
    <ul>
      <li>このメーカーのものにする</li>
    </ul>
  </li>
  <li>無洗米1キロ
    <ul>
      <li>このメーカーのものにする</li>
    </ul>
  </li>
  <li>卵1パック
    <ul>
      <li>タイムセールが終わってたら買わない</li>
    </ul>
  </li>
  <li>豆腐2パック
    <ul>
      <li>木綿1、絹1</li>
    </ul>
  </li>
</ul>

このように、<li>の中に<ul>を入れ子にします。

親子関係を持たせるため、<li>(リスト項目)と<li>(別のリスト項目)との間に入れるのではなく、<li>(開始タグ)と</li>(終了タグ)の中に入れます。
<li>と<li>の間に入れたほうがスマートに見えるかもしれませんが、項目に対し子要素を持たせる意味では、項目それ自体の中に記述するのが適切といえるかと思います。
HTMLでの表示
  • しょうゆ1L
    • このメーカーのものにする
  • 無洗米1キロ
    • このメーカーのものにする
  • 卵1パック
    • タイムセールが終わってたら買わない
  • 豆腐2パック
    • 木綿1、絹1

するとこのように、1段下がったリストが挿入されます。

ただ、補足説明という意味では<dl>タグを使ったほうがいい場合もあります。

買い物用定義リストの例
<dl>
<dt>しょうゆ1L</dt>
<dd>このメーカーのものにする</dd>

<dt>無洗米1キロ</dt>
<dd>このメーカーのものにする</dd>

<dt>卵1パック</dt>
<dd>タイムセールが終わってたら買わない</dd>

<dt>豆腐2パック</dt>
<dd>木綿1、絹1</dd>
</dl>

このように記述します。

HTMLでの表示
しょうゆ1L
このメーカーのものにする
無洗米1キロ
このメーカーのものにする
卵1パック
タイムセールが終わってたら買わない
豆腐2パック
木綿1、絹1

「説明」の役割を持った<dd>タグがあるため入れ子にする必要がなく、シンプルに記述できます。

また定義リストは標準でプレフィックス(接頭辞)を持たないことが多いので、スタイルの指定をしなくても項目の頭に何も付きません。

<ul style="list-style-type:none;">とか書くのが面倒な場合にも使えます。

関連記事

  1. RankBuddy- iPhone and iPad app
  2. Google求人情報で仕事を探す
  3. seo-is-advanced-website-maintenance

コメントをお待ちしております

HTMLタグはご利用いただけません。