滄洲の雑記帳: 11月 2010

2010年11月30日火曜日

ホームページを作ろう - 1.15 箇条書き（リスト）の作り方

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 | b | 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>