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>の間に入れたほうがスマートに見えるかもしれませんが、項目に対し子要素を持たせる意味では、項目それ自体の中に記述するのが適切といえるかと思います。
- HTMLでの表示
-
- しょうゆ1L
- このメーカーのものにする
- 無洗米1キロ
- このメーカーのものにする
- 卵1パック
- タイムセールが終わってたら買わない
- 豆腐2パック
- 木綿1、絹1
- しょうゆ1L
するとこのように、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;">とか書くのが面倒な場合にも使えます。
コメント