10 リスト

10.1 リストへの導入

HTMLは,情報のリストを指定するためにいくつかの機構を著者に提供する。 すべてのリストは一つ以上のリスト要素を包含しなければならない。リストが 包含する可能性のあるものを次に示す。

例えば,上記リストは順序なしリストであり, UL要素で生成されている。

<UL>
<LI>Unordered information. 
<LI>Ordered information. 
<LI>Definitions. 
</UL>

順序付きリストは,OL 要素を用いて生成され,順序が強調されるほうがよい情報を含むことが望ましい。 順序付きリストの例としてレシピを次に示す。

  1. 固形材料を十分に混ぜる
  2. 液体の材料に入れる。
  3. 10分間混ぜる。
  4. 300度で1時間焼く。

定義リストは, DL 要素を用いて生成され,一般に一連の単語/定義ペアから構成される。ただし,定義リスト は他の使い道を有する可能性がある。そのため,製品を宣伝する場合は,定義 リストを使用してもよい。その例を次に示す。

コスト削減
この製品の新バージョンは以前よりもコストをかなり削減します!
使用が簡単
もっと簡単に使用できるように製品を改良!
子供にも安心
この製品のある部屋に子供を残していっても,けがの心配はありません(ただし 保証はできません)。

HTMLでの定義を次に示す。

<DL>
<DT><STRONG>Lower cost</STRONG>
<DD>The new version of this product costs significantly less than the
previous one!
<DT><STRONG>Easier to use</STRONG>
<DD>We've changed the product so that it's much easier to use!
<DT><STRONG>Safe for kids</STRONG>
<DD>You can leave your kids alone in a room with this product and
they won't get hurt (not a guarantee).
</DL>

同様に,リストは入れ子にされ,異なるリスト型が共に使用されることもある。順序なし リスト(材料)及び順序付きリスト(作り方)を包含する定義リストの例を次に示す。

材料:
  • 小麦粉 100g
  • 砂糖 10g
  • 水1カップ
  • 玉子2個
  • 塩,こしょう
作り方:
  1. 固形の材料を十分混ぜる。
  2. 液体の材料に入れる。
  3. 10分間かき混ぜる。
  4. 300度で1時間焼く。
注:
レーズンを加えるとより美味しくなる。

三つのリスト型の正確なプレゼンテーションは,利用者エージェントに依存する。 著者が単に字下げテキストの手段としてリストを使用することは望ましくない。これは 様式的な問題であり,スタイルシートによって適正に処理される。

10.2 順序なしリスト(UL), 順序付きリスト(OL)及びリスト項目(LI)

<!ELEMENT UL - - (LI)+                 -- unordered list -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- ordered list -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須, 終了タグ: 必須


<!ELEMENT LI - O (%flow;)*             -- list item -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須, 終了タグ: オプション

属性定義

type =  style-information [CI]
推奨しない。この 属性はリスト項目のスタイルを設定する。現在,利用可能な値は視覚的利用者エージェントを意図したものである。 取り得る値は 文字情報に従って,後に記述する。
start = number [CN]
推奨しない。 OL のみに関するものである。この属性は,順序付きリストの最初の項目の開始番号を指定 する。デフォルト開始番号は"1"である。この属性の値は整数であるが,対応するラベル は数字ではないこともある点に注意すること。例を挙げると,リスト項目のスタイルが ラテン文字の大文字(A,B,C,...)である場合は, start=3は "C"を意味する。スタイルがローマ数字の小文字である場合は, start=3は"iii"を意味する。
value = number [CN]
推奨しない。 LI にのみ関するものである。この属性は現リスト項目の番号を設定する。 この属性の値は整数であるが,対応するラベルは数字ではない場合がある点に注意 すること。 ( start 属性を参照のこと)。
compact [CI]
推奨しない。 設定の場合は,この論理的属性は視覚的利用者エージェントにヒントを与え,より簡潔 な方法でリストをレンダリングする。この属性の翻訳は利用者エージェントに依存する。

他の箇所で定義される属性

順序付きリスト及び順序なしリストは,視覚的利用者エージェントが順序付きリスト の項目を番号付けする以外の同一の方法でレンダリングされる。利用者エージェントは, 多様な方法でそれらの番号を表示する。順序なしリストの項目は番号付けされない。

リストは両型とも LI要素によって定義された リスト項目の列から作成される。LI要素の終了タグは省略される場合がある。

次の例はリストの基本構造を記述する。

<UL>
   <LI> ... first list item...
   <LI> ... second list item...
   ...
</UL>

リストは入れ子になる場合がある。

推奨しない例:

<UL>
     <LI> ... Level one, number one...
     <OL> 
        <LI> ... Level two, number one...
        <LI> ... Level two, number two...
        <OL start="10"> 
           <LI> ... Level three, number one...
        </OL> 
        <LI> ... Level two, number three...
     </OL> 
     <LI> ... Level one, number two...
</UL>

番号順に関する詳細 順序付きリストでは,以前のリストから自動的にリスト番号 付けを続行したり,又はいくつかのリスト項目の番号付けを隠蔽することはできない。 しかし,著者は その value 属性を設定することにより,リスト項目の番号を再設定することができる。 番号付けは,連続するリスト項目に関する新しい値から続行する。その例を次に示す。 :

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

10.3 定義リスト(DL要素, DT要素及びDD要素)

<!-- definition lists - DT for term, DD for its definition -->

<!ELEMENT DL - - (DT|DD)+              -- definition list -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須, 終了タグ: 必須

<!ELEMENT DT - O (%inline;)*           -- definition term -->
<!ELEMENT DD - O (%flow;)*             -- definition description -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須, 終了タグ: オプション

他の箇所で定義される属性

定義リストは,リスト項目が単語及び記述の二つの部分から構成されるという点で他の型の リストから多少ずれる。単語は DT 要素によって与えられ,行内内容に制限される。 記述は,ブロックレベル内容を包含する DD 要素で与えられる。

例を次に示す。

  
<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker on the Internet

  <DT>Nerd
  <DD>male so into the Net that he forgets
    his wife's birthday
</DL>

複数の単語及び記述のある例を次に示す。

<DL>
   <DT>Center
   <DT>Centre
   <DD> A point equidistant from all points
              on the surface of a sphere.
   <DD> In some field sports, the player who
              holds the middle position on the field, court,
              or forward line.
</DL>

例えば, DLの別のアプリケーションはマーク付けされた対話 に関するものであり, 対話者を命名する各 DT,及びその言葉を包含する 各 DDを用いている。

10.3.1 リストの視覚的レンダリング

備考 次は,リストをフォーマットする 場合に,いくつかの現利用者エージェントの振舞いを情報提供用に記述したもの である。スタイルシートにより,番号付け,言語依存規約,字下げなどに関するリスト のフォーマット化の制御がより優れたものとなる。

視覚的利用者エージェントは,一般に,現在の入れ子レベルに従って,組込みリストを字下げする。

OL 及び ULの両要素について, type 属性は視覚的利用者エージェントのためにレンダリング選択を指定する。

UL 要素については, type属性に対して取り得る値disc, square, 及び circleである。 デフォルト値は現リストの組込みのレベルに依存 する。これらの値は大文字及び小文字を区別しない。

各値がどのように表示されるかは利用者エージェントに依存する。 利用者エージェントは,塗りつぶした小さな丸として"disc"を, 小さな丸枠として"circle"を,小さな四角枠として "square"を表示しようと 試みることが望ましい。

図形利用者エージェントがこれをレンダリングしたものを次に示す。

A possible rendering of a disc は "disc"値に対応する。
A possible rendering of a circle は "circle"値に対応する。
A possible rendering of a square は "square"値に対応する。

OL 要素については, type属性に対して取り得る値を次の表に要約する( 大文字及び小文字を区別する)。

番号付けスタイル
1アラビア数字1, 2, 3, ...
aアルファベット小文字a, b, c, ...
Aアルファベット大文字A, B, C, ...
iローマ数字小文字i, ii, iii, ...
Iローマ数字大文字I, II, III, ...

type属性は 推奨されず リストスタイルはスタイルシートによって処理することが望ましい点に注意すること。

例えば,CSSを使用する場合,番号付けリストで,リスト要素に対応する番号のスタイルが 小文字のローマ数字が望ましいと指定してよい。次の抜粋ではクラス"withroman"に属するあらゆる OL 要素がリスト項目の最初にローマ数字を有することになる。

<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Step one ...  
<LI> Step two ...
</OL>
</BODY>

定義リストのレンダリングは,同様に利用者エージェントに依存する。例を次に 示す。

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker on the Internet

  <DT>Nerd
  <DD>male so into the Net that he forgets
    his wife's birthday
</DL>

上記例をレンダリングしたものを次に示す。

Dweeb
       young excitable person who may mature into a Nerd or Geek
Cracker
       hacker on the Internet
Nerd
       male so into the Net that he forgets his wife's birthday

10.4 DIR要素及び MENU要素

DIR及び MENUは 推奨しない

公式の定義については, 変換 DTDを 参照のこと。

他の箇所で定義される属性

DIR要素は複数列ディレクトリリストの生成に使用するため設計された。 MENU 要素は単一列メニューリストに使用するため設計された。両要素とも ULと同様の構造をもつが,レンダリングは異なる。 実際,利用者エージェントは DIRリスト又は MENUリストを UL リストとして正確にレンダリングする。

これらの要素の代わりに,ULの使用を強く推奨 する。