リスト

HTMLには、「段落」以外にも文書を構成するパーツがあります。今度はそれを紹介していきます。

そこでまず紹介するのがリストです。リストとは、次のようなものです。

• 醤油ラーメン
• 味噌ラーメン
• 塩ラーメン

リストにもいくつか種類がありますが、これはいわゆる箇条書きです。これをHTMLで表現する方法を紹介します。

ul要素

箇条書きを表現するのに使うのが、ul要素です。ul要素があると、そこに箇条書きリストができます。

そしてさらに、リストの中身を記述するのにli要素を使います。

これらを利用して、次のように書きます。

<p>メニューは次のようになっています。</p>
<ul>
<li>醤油ラーメン</li>
<li>味噌ラーメン</li>
<li>塩ラーメン</li>
</ul>

ul要素に、li要素以外のものを入れてはいけません。

ol要素

次のリストは、ol要素のリストです。このリストは、順序があるリストです。つまり、リストの各項目に番号がついています。さっきのul要素の場合、番号など付いていないので、順番が変わってもOKということを暗に示しています。

使い方はul要素と同じです。

<p>メニューの人気ランキングは次のようになっています。</p>
<ol>
<li>醤油ラーメン</li>
<li>味噌ラーメン</li>
<li>塩ラーメン</li>
</ol>

今度は、順序が意味を持つということで「人気ランキング」にしてみました。さっきのul要素の例では、メニューの一覧なので順番が変わっても問題ありませんでしたが、これはランキングなので、順序が意味を持ちます。

この場合、一番最初のli要素が1、次は2、3、…と続きます。ol要素では、この数字をいじることができます。

その1つに、reversed属性があります。これは論理属性で、リストが逆順であることを示します。例えば、次のようにします。

<p>メニューの人気ランキングは次のようになっています。</p>
<ol reversed>
<li>醤油ラーメン</li>
<li>味噌ラーメン</li>
<li>塩ラーメン</li>
</ol>

こうすると、番号は上から3,2,1となります。ランキングの順位が逆転しました。

他に、start属性があります。これは、一番最初の項目が何番になるかを指定するものです。

<p>メニューの人気ランキングは次のようになっています。</p>
<ol start="4">
<li>醤油ラーメン</li>
<li>味噌ラーメン</li>
<li>塩ラーメン</li>
</ol>

こうすることで、順番に4,5,6となり、4位～6位の紹介となります。注意すべきなのは、次のような場合です。

<p>メニューの人気ランキングは次のようになっています。</p>
<ol start="4" reversed>
<li>醤油ラーメン</li>
<li>味噌ラーメン</li>
<li>塩ラーメン</li>
</ol>

こうすると、6,5,4ではなく4,3,2になります。あくまで4から始まるのです。

さらに、li要素の側からも自身の数字を決めることができます。そのために使うのがvalue属性です。

<p>メニューの人気ランキングは次のようになっています。</p>
<ol>
<li>醤油ラーメン</li>
<li>味噌ラーメン</li>
<li value="100">塩ラーメン</li>
</ol>

こうすることで、塩ラーメンが100位になります。つまり、1,2,100となるということです。ちなみに、この下にさらに項目があれば、それは101になります。

ol要素にstart属性があり、最初のli要素にもvalue属性がある場合、value属性が優先されます。

dl要素

リストの種類はもう1つあります。それはdl要素による定義リストです。ただ、厳密には「定義」以外の使用の仕方も可能です。「定義リスト」（Definition list）はdlという名の由来になっています。

さて、どういうことかというと、dl要素のリストは名前と値のグループからなっています。まず名前があって、値はそれに対する説明です。

定義リストというのは、その1つの形態であるわけです。

さて、dl要素では、li要素の代わりにdt要素とdd要素を使います。dt要素が名前、dd要素が値（説明）です。例えば、次のようにします。

<p>メニューは次のようになっています。</p>
<dl>
<dt>醤油ラーメン</dt>
  <dd>¥600</dd>
<dt>味噌ラーメン</dt>
  <dd>¥750</dd>
<dt>塩ラーメン</dt>
  <dd>¥600</dd>
</dl>

メニューの名前だけでなく、値段の説明が加えられました。dt要素の内容を、dd要素で説明しているという形になっています。

ついでに、名前の由来である定義リストを作ってみます。同じように、名前と、その説明（定義）をdtとddで書けばいいのです。

<dl>
<dt>strong要素</dt>
  <dd>重要性を表す要素。</dd>
<dt>em要素</dt>
  <dd>強調を表す。</dd>
<dt>time要素</dt>
  <dd>日時を表す。</dd>
</dl>

また、定義リストを作る際によくセットで使われる要素を紹介します。それはdfn要素です。

dfn要素とは、まさに定義を表す要素です。dfn要素でマークアップされた語が定義されるということを表しています。そのため、同じ段落、または最低でも同じセクション内には、その用語の定義が含まれていないといけません。

例えば、今この説明で「dfn要素とは、…」といっていますが、これはまさにdfn要素とは何かを説明している、すなわち定義です。だから、「dfn要素」という部分はdfn要素によってマークアップされています。

つまり、定義リストの場合、dtの内容としてさらにdfn要素を使えるのです。すなわち、次のようにします。

<dl>
<dt><dfn>strong要素</dfn></dt>
  <dd>重要性を表す要素。</dd>
<dt><dfn>em要素</dfn></dt>
  <dd>強調を表す。</dd>
<dt><dfn>time要素</dfn></dt>
  <dd>日時を表す。</dd>
</dl>

以上、3種類のリストを紹介しました。上手に利用しましょう。

ちなみに、これらのリストはフレージング・コンテンツではありません。つまり、p要素の中に入れて文の途中に表示したりはできません。文中で登場するときは、p要素をいったんとじて、p要素の兄弟として利用しましょう。基本的に、フレージング・コンテンツでなければ全てこのような利用方法だと思って構いません。