ホームページの基礎（1. XHTML 編）

1.15 箇条書き（リスト）の作り方

XHTML（HTML）では，３種類の箇条書き（リスト）構造を表現する要素が用意されています。

• 無順序リスト
• 順序リスト
• 定義リスト

無順序リストと順序リストは共通の文書構造を持ち，定義リストは若干異なる文書構造を持っています。また，３種類のリスト構造はいずれもブロックレベル要素に分類される要素です。

以下に関係する部分のDTD（一部）を抜粋しておきます。

<!ENTITY % lists "ul | ol | dl">

<!ENTITY % block
     "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

1.15.1 無順序リスト

無順序リストは，順序関係のない，いわゆる通常の箇条書きの構造を表す要素です以下に無順序リストのDTDを示します。

<!ELEMENT ul (li)+>

<!ELEMENT li %Flow;>

無順序リストはul要素で表され，その内容モデルは，１つ以上のli要素から構成されます。つまり，ul要素の子要素としては，li要素以外の要素は記述できないので注意してください。

次に無順序リストを構成するリスト項目は，li要素で表されます。そのli要素の内容モデルは，すべてのブロックレベル要素とインライン要素を記述することができます。

<!--=================== Text Elements ====================================-->
<!ENTITY % special.pre
   "br | span | bdo | map">

<!ENTITY % special
   "%special.pre; | object | img ">

<!ENTITY % fontstyle "tt | i | b | big | small ">

<!ENTITY % phrase "em | strong | dfn | code | q |
                   samp | kbd | var | cite | abbr | acronym | sub | sup ">

<!ENTITY % inline.forms "input | select | textarea | label | button">

<!-- these can occur at block or inline level -->
<!ENTITY % misc.inline "ins | del | script">

<!-- these can only occur at block level -->
<!ENTITY % misc "noscript | %misc.inline;">

<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">

<!-- %Inline; covers inline or "text-level" elements -->
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">

<!--================== Block level elements ==============================-->
<!ENTITY % heading "h1|h2|h3|h4|h5|h6">

<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">

<!ENTITY % block
     "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

<!ENTITY % Block "(%block; | form | %misc;)*">

<!-- %Flow; mixes block and inline and is used for list items etc. -->

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

では，いくつかのサンプルを見てみましょう。

<ul>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
</ul>

これは次のように表示されます。（実際の表示はあなたが使用しているブラウザの表示になります。）

次の例は，リストの入れ子（リストの中のリスト）のサンプルです。

<ul>
    <li>
        リスト項目１
        <ul>
            <li>リスト項目１−１</li>
            <li>リスト項目１−２</li>
        </ul>
    </li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
</ul>

これは次のように表示されます。（実際の表示はあなたが使用しているブラウザの表示になります。）

1.15.2 順序リスト

順序リストは，順序関係のある，いわゆる番号付けされた箇条書きの構造を表す要素です。以下に順序リストのDTDを示します。

<!ELEMENT ol (li)+>

<!ELEMENT li %Flow;>

順序リストはol要素で表され，その内容モデルは，１つ以上のli要素から構成されます。つまり，ol要素の子要素としては，li要素以外の要素は記述できないことになります。

次に順序リストを構成するリスト項目は，li要素で表されます。これはul要素で使用したものとまったく同じものです。

では，いくつかのサンプルを見てみよう。

<ol>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
</ol>

これは次のように表示されます。（実際の表示はあなたが使用しているブラウザの表示になります。）

次の例は，リストの入れ子（リストの中のリスト）のサンプルです。

<ol>
    <li>
        リスト項目１
        <ol>
            <li>リスト項目１−１</li>
            <li>リスト項目１−２</li>
        </ol>
    </li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
</ol>

これは次のように表示されます。（実際の表示はあなたが使用しているブラウザの表示になります。）

---

また，各リスト要素はお互いを入れ子にすることも可能です。

<ol>
    <li>
        リスト項目１
        <ul>
            <li>リスト項目１−１</li>
            <li>リスト項目１−２</li>
        </ul>
    </li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
</ol>

これは次のように表示されます。（実際の表示はあなたが使用しているブラウザの表示になります。）

1.15.3 定義リスト

定義リストは，用語とその説明を表すなどの箇条書きの構造を表す要素です。以下に定義リストのDTDを示します。

<!ELEMENT dl (dt|dd)+>

<!ELEMENT dt %Inline;>

<!ELEMENT dd %Flow;>

定義リストはdl要素で表され，その内容モデルは，１つ以上のdt要素とdd要素から構成されます。

通常，dt要素とdd要素が対で使用されるが，複数のdt要素に対して１つのdd要素，あるいはその逆であっても文法的には正しい。また，その出現順序についても規定はないが，一般的にdt要素の次にdd要素を書くことが多い。

定義リストを構成する項目は，dt要素とdd要素ですが，dt要素が用語に相当し，その内容モデルは，インライン要素のみです。一方，dd要素が説明に相当する部分で，こちらの内容モデルはインライン要素，ブロックレベル要素いずれも記述することができます。

では，代表的なサンプルを見てみましょう。

<dl>
    <dt>用語１</dt>
    <dd>用語１の説明</dd>
    <dt>用語２</dt>
    <dd>用語２の説明</dd>
    <dt>用語３</dt>
    <dd>用語３の説明</dd>
</dl>

これは次のように表示されます。（実際の表示はあなたが使用しているブラウザの表示になります。）