リスト

リストの概説

HTMLでは著者に對して，リスト情報を指定するための幾つかのメカニズムが提供されます。どのリストも，箇條となるli要素（list item）のやうに，そのリストを構成する事柄となる要素を少くとも一つは含めなければなりません。リストには，次のやうな内容が含まれます：

• 順不同の情報(unordered)
• 序列の情報(ordered)
• 定義(definitions)

このやうなリストをうまく活用すると，ユーザが流し讀みをする際の手助けになります。たとへば，何かしらの關聯性のある事柄について竝べ立てる場合，パラグラフのやうな一續きの長いテキストとして情報を傳へるより，リストとして整理したはうが，簡潔になる場合もあるでせう。

また，ナヴィゲーションなど，テキストの文脈とは獨立してリンクアンカーだけを列擧したい場合も，リストは役立つでせう。

順不同リスト: ul, li要素

順不同リスト（unordered list）は，上述のリストがその例で，ul要素で生成されてゐます。ソースを示します：

<ul>
  <li>順不同の情報(unordered)</li>
  <li>序列のある情報(ordered)</li>
  <li>定義(definitions)</li>
</ul>

ul要素の直接の中身は，1つ以上のli要素だけで構成されねばなりません。li要素は，ul要素の外に出してはなりません。

序列リスト: ol, li要素

序列リスト（ordered list）を生成するにはol要素を用ゐ，レシピのやうに，順序が重要である情報を含むべきです。

次に序列リストの例として，「ナメコ汁」のレシピを示します：

1. ナメコはざるに入れ，熱湯をかけてぬめりを取る。
2. 鍋に出汁を入れナメコを加へて輕く火を通す。
3. みそを溶き，豆腐を手のひらでさいの目に切つて，加へる。
4. 豆腐が暖まつて搖れてきらたら火を止める。

この序列リストは，次のやうにマークアップされてゐます：

<ol>
  <li>ナメコはざるに入れ，熱湯をかけてぬめりを取る。</li>
  <li>鍋に出汁を入れナメコを加へて輕く火を通す。</li>
  <li>みそを溶き，豆腐を手のひらでさいの目に切つて，加へる。</li>
  <li>豆腐が暖まつて搖れてきらたら火を止める。</li>
</ol>

ol要素の直接の中身は，1つ以上のli要素だけで構成されねばなりません。li要素は，ol要素の外に出してはなりません。

定義リスト: dl, dt, dd要素

定義リスト（definition list）はdl要素で生成され，一般的には一聯の「用語（term）/定義説明（description）」のペアで構成されます。しかし，そのほかの應用法でも構ひません。たとへば，製品の宣傳に定義リストを使ふやうな場合もあるでせう。次にその例を示します：

低價格

新ヴァージョンは，舊ヴァージョンよりも大幅に値下げしました!

簡單に使へる

もつと使ひやすくなるやうに改良しました!

お子さまにも安全

お子さまだけが部屋にゐる時でも，怪我の心配はありません(ただし保證はしません)

この定義リストは，次のやうにマークアップされてゐます：

<dl>
  <dt>低價格</dt>
  <dd>新ヴァージョンは，舊ヴァージョンよりも大幅に値下げしました!</dd>
  <dt>簡單に使へる</dt>
  <dd>もつと使ひやすくなるやうに改良しました!</dd>
  <dt>お子さまにも安全</dt>
  <dd>お子さまだけが部屋にゐる時でも，怪我の心配はありません(ただし保證はしません)</dd>
</dl>

この他にも，FAQで「質疑/應答」，對談記事で「話者/會話」，リンク集で「サイト名/その概要」といふ形でも構ひません。

dl要素の直接の中身は，1つ以上のdt要素もしくはdd要素だけで構成されねばなりません。dt要素の内容は，用語などの單純なテキストを意圖してゐるので，インライン内容（文字データやインライン要素）しか含められません。dtとddは，dl要素の外に出してはなりません。

HTML 4仕樣では，定義リスト内での出現順序を定めてゐません。しかし，dt要素とdd要素のペアで使ふのがやはり好ましいでせう。しかし，複數のdt要素に對して1つのdd要素（dt-dt-dd）でも構ひませんし，1つdt要素に對して複數のdd要素（dt-dd-dd）でも構ひません。

リストの入れ子構造について

各リストは入れ子の構造にすることもでき，その際には異る形式のリストを組合せることも可能です。

次に，順不同リスト（材料）と序列リスト（作り方）を含む定義リストの例を示します：

材料:

• ナメコ 1パック
• 豆腐 1/2丁
• 水 3カップ
• 米みそ 大さじ3

作り方:

1. ナメコはざるに入れ，熱湯をかけてぬめりを取る。
2. 鍋に出汁を入れナメコを加へて輕く火を通す。
3. みそを溶き，豆腐を手のひらでさいの目に切つて，加へる。
4. 豆腐が暖まつて搖れてきらたら火を止める。

dd要素は，ブロックレヴェル要素を内容に含められるので，上述のとほり "順不同リスト：ul" や "序列リスト：ol" を含めても構ひません。また，li要素も同樣にブロックレヴェル要素を内容に含められるので，li要素の中にさらにol要素あるいはul要素を入れ子にしても構ひません。

次では順不同リストの中に，さらに "順不同リスト：ul" や "序列リスト：ol" を含めて入れ子にしてゐます：

• 材料:
  • ナメコ 1パック
  • 豆腐 1/2丁
  • 水 3カップ
  • 米みそ 大さじ3
• 作り方:
  1. ナメコはざるに入れ，熱湯をかけてぬめりを取る。
  2. 鍋に出汁を入れナメコを加へて輕く火を通す。
  3. みそを溶き，豆腐を手のひらでさいの目に切つて，加へる。
  4. 豆腐が暖まつて搖れてきらたら火を止める。

この場合，入れ子にしたいul要素またはol要素は，li要素の中身に含めねばなりません。

これらリスト形式による慥かなプレゼンテーションは，UAに依存します。HTML 4仕樣の編者逹は，著者が單なる餘白を插入する手段としてリストを扱ふことを，思ひ止まらせたいと考へてゐます。餘白は樣式的な問題であり，スタイルシートに據つて適切に扱はれます。

リストの視覺的レンダリング

この節では參考情報として，リストの整形について既存の視覺系User Agentがどう振る舞ふのか概説します。著者は，CSSスタイルシートの仕組を用ゐると，リストをより豐かに整形できます――たとへば，多樣な番號づけ，言語に合致した表現，階層ごとの餘白など。

次では，視覺系User Agentが一般的に施すであらう，デフォルトの外觀について説明します：

入れ子による階層的な餘白

一般に，どのリスト形式の場合でも，入れ子になつてゐるリストは，その階層に應じて餘白が插入される。

慣例としてCSSの 'padding-left' もしくは 'margin-left' に據つて調整されてゐる（書字が左から右の時）。

序列リストで附加される番號

一般に序列リストであるol要素では，各項目（li要素）の先頭に算用數字が附加され，1から數へられる。

番號づけはCSSの 'list-style-type' に據つて，他の番號體系，もしくはアルファベット體系に設定できる。

順不同リストで附加される印

一般に順不同リストであるul要素では，その階層に應じて内部の項目（li要素）に附加する印を變化させる。

慣例では "disc"（• 塗りつぶしの小さな丸），"circle"（◦ 小さな円の輪郭），"square"（■ 小さな正方形）の順。

また，CSSの'list-style-image'プロパティを用ゐると，グリフの代りに，畫像リソースを用ゐる事もできます。

著者は，スタイル指定された數へ方が必ずしも意圖どほりになるとは限らない點に注意してください。たとへば序列リストの項目に關して，その補足をつけたい場合，"bの項は，推奬されません" のやうに表現すべきではありません。これはアルファベット體系に依存してゐます。

代りに著者は順序だけで表現し――"2番目の項"，"3〜4番の項" など――數へ方に依存しないやう工夫すべきです。