HTML
Web制作の初心者に向けたHTMLの基礎知識について解説しています

さまざまなリストを表す要素

文書の中には頻度に箇条書などのリストといったものが頻度の出てきます。HTMLでは箇条書きのように列記をするためのリストや、タイトルと説明が一対となったリスト（説明リスト）などをマークする要素があります。

ここでは箇条書き（リスト）を作る「ul要素」「ol要素」「li要素」、説明リストを作るための「dl要素」「dt要素」「dd要素」について解説します。

箇条書きリストを作る – ul要素・ol要素

箇条書きリストを作成するためには、リストを意味するul要素、ol要素、リストの項目を意味するli要素の3つの要素を使います。

箇条書きリストの基本は２つの要素で構成されます。リストの範囲を囲むul要素もしくはol要素と、その子要素となるリストの項目を囲むli要素です。箇条書きリストを作成する時は必ず「ulとli」または「olとli」のセットで使用します。

リストの範囲を表すul要素・ol要素とリストの項目を表すli要素の構造

箇条書きの項目はいくつでも書くことができます。li要素を必要な数だけ追記していきます。

順序なしリストを表すul要素

ul要素は「Unordered List」の略で、順不同（順番の関係ない）の箇条書きリストを作成する時に使用します。li要素は「List Item」の略でリストの項目を表します。

ul要素：順序なしリスト
<ul>
    <li>卵 1コ</li>
    <li>サラダ油 大さじ1</li>
    <li>塩 少々</li>
    <li>こしょう 少々</li>
</ul>

このようにli要素の前後には改行が入り、ul要素でマークアップされている場合には、規定値として各項目の先頭に黒丸マーカー付く箇条書きとなります。

Note

HTML4.01では、ul要素には「type属性」が用意されており、リストの先頭マーカーの種類を指定することができましたが、HTML5では、type属性は廃止されました。リストマーカーはCSSの「list-style-typeプロパティ」を使用して変更します。

順序ありリストを表すol要素

ol要素は「Ordered List」の略で、順番がある箇条書きリストを作成する時に使用します。

ol要素：順序ありリスト
<ol>
    <li>卵1コを器に割り入れる</li>
    <li>フライパンにサラダ油を入れて強火で熱してから卵を入れ、3分間ほど焼く。</li>
    <li>白身の色が変わり始めたら、弱めの中火にし、黄身の周りの白身が固まるまで焼く。</li>
    <li>器に盛り、好みで塩、こしょうをふる。</li>
</ol>

ol要素でマークアップしたとき、各項目の先頭マーカーが連番の数字（アラビア数字の整数）になります。

ol要素のstart属性で開始番号を変更する

ol要素の先頭マーカーは最初の項目には１がつきますが、「start属性」を使って連番の開始番号を指定することができます。整数のみ指定可能で、指定した数字が連番の開始番号として表示されます。

次の例では項目の開始番号を「5」に指定しています。

ol要素の開始番号を変更するstart属性
<ol start="5">
    <li>番号ありのリスト項目05</li>
    <li>番号ありのリスト項目06</li>
    <li>番号ありのリスト項目07</li>
</ol>

ol要素のreversed属性でリストの並び順を変更する

ol要素の先頭マーカーでは、数字は昇順（小さい順）になります。「reversed属性」によってリストの並び順を降順（大きい順）に変更することができます。
次の例は項目の連番を大きい方から小さい方へ変更しています。

ol要素の並び順を変更するreversed属性
<ol reversed="reversed">
    <li>番号ありのリスト項目03</li>
    <li>番号ありのリスト項目02</li>
    <li>番号ありのリスト項目01</li>
</ol>

ul・ol要素の直下の子要素にはli要素しか入れてはいけない

ul・ol要素の直下の子要素にはli要素しか入れることはできません。ul・ol要素中にli要素以外のものを入れたい場合、li要素のなかに入れましょう。

li要素の中にul要素を入れて箇条書きリストを入れ子で表現することもできます。また、見出しや段落など様々な要素を格納することができます。

ul・ol要素のの入れ子
<ul>
    <li>リスト項目</li>
    <li>リスト項目</li>
    <li>リスト項目
        <ul>
            <li>リスト項目</li>
            <li>リスト項目</li>
        </ul>
    </li>
    <li>リスト項目</li>
    <li>リスト項目</li>
</ul>

ul要素は基本的には文章の箇条書きとして使用しますが、情報に関連性・規則性のあるものであれば、それをまとめるための要素として使用しても問題ありません。

説明リストを作る – dl要素

HTML4.01では「dl要素」は、「dt要素」、「dd要素」を子要素とする語句・用語を定義する「定義リスト」というものでしたが、HTML5では「記述リスト」あるいは「説明リスト」というように変更されました。

html5からは次のように定義されています。

要素意味
dl要素（description list）説明リスト（リストの範囲）
dt要素（description term）説明する言葉（見出しの意味を持つ項目）
dd要素（definition description）定義文や説明文（その内容の意味を持つ項目）

説明リストは、リストの範囲を示すdl要素を親要素として、子要素の「説明する用語や見出し」となるdt要素と「その定義文や説明文」となるdd要素で構成されます。必ずdl・dt・dd要素のセットで使用します。dt要素の内容をdd要素で説明しているような形にし、それらをまとめてグループにするdl要素で囲むように使用します。

説明リストを作るdl・dt・dd要素

dt要素に対して必ず最低一つのdd要素が必要ですが、一つのdt要素に対して複数のdd要素を書くことがことができます。もちろん、dt要素とdd要素をセットでいくつも設定することもできます。

説明リストを作るdl・dt・dd要素
<dl>
    <dt>HTML</dt>
    <dd>Webページの文書構造を定義するためのマークアップ言語です。</dd>
</dl>
<dl>
    <dt>CSS</dt>
    <dd>Webページのレイアウトやデザイン・装飾をするための言語です。</dd>
</dl>
<dl>
    <dt>JavaScript</dt>
    <dd>ブラウザ上で実行されるスクリプト言語です。</dd>
</dl>