1999年12月24日付のHTML 4.01仕様により、4.0仕様はobsoleteされています。また、邦訳の質自体も4.01仕様訳の方が格段に良くなっていますから、HTML4仕様を日本語で確認される場合は4.01仕様訳をご利用ください。


10 リスト(Lists

この章の目次

  1. リストの概説(Introduction to lists)
  2. 順不同リスト (UL要素)、 番号つきリスト (OL要素)、リスト項目 (LI要素) について(Unordered lists (UL), ordered lists (OL), and list items (LI))
  3. 定義リストについて: DLDTDD要素(Definition lists: the DL, DT, and DD elements)
    1. リストの視覚的表現方法(Visual rendering of lists)
  4. DIR要素とMENU要素(The DIR and MENU elements)

10.1 リストの概説(Introduction to lists

HTMLでは、文を箇条書き(リスト)として表現するために幾つかの方式が用意されています。どのリスト方式であっても、1つ以上のリスト項目が含まれていなければなりません。リスト方式には、次の3つがあります。

上記の箇条書きは、順不同のリストですが、UL要素を用いて次のように記されています。

<UL>
<LI>順不同のリスト
<LI>番号つきリスト
<LI>定義リスト
</UL>

番号つきのリストは、OL要素によって記されます。料理のレシピなど手順が重要であるような箇条書きに使われます。

  1. 粉末状の材料を、完全に混ぜ合わせます。
  2. 液状の材料を加えます。
  3. 10分間撹拌します。
  4. 300度で1時間焼きます。

定義リストは、DL要素によって記されます。一般的には「用語・定義」の組が並べられることとなります。(とはいえ定義リストには他の使用法もあります。)商品の広告などに、下記のような定義リストが使われることもあるでしょう。

低価格
新バージョンは、旧バージョンより大幅に値下げしました!
簡単
より操作を易しくしました!
お子さまにも安全
お子さまだけが部屋にいる時でも、お子さまを傷つけるようなことはありません(保証の限りではありませんが)。

これはHTMLで次のように記されています。

<DL>
<DT><STRONG>低価格</STRONG>
<DD>新バージョンは、旧バージョンより大幅に値下げしました!

<DT><STRONG>簡単</STRONG>
<DD>より操作を易しくしました!

<DT><STRONG>お子さまにも安全</STRONG>
<DD>お子さまだけが部屋にいる時でも、
  お子さまを傷つけるようなことはありません
  (保証の限りではありませんが)。
</DL>

各リストは、下の例のように、入れ子にすることもできますし、他方式のリストと組み合わせて使うこともできます。この例では定義リストに順不同リスト(材料の表記)と番号つきリスト(手順の表記)を組み合わせています。

材料
手順
  1. 小麦粉と砂糖、塩・胡椒を完全に混ぜ合わせます。
  2. 水と卵を加えます。
  3. 10分間撹拌します。
  4. 300度で1時間焼きます。
注意
干しぶどうを加えるとなお良いでしょう。

3つのリスト方式がどのように表示されるかは、ユーザエージェントによる違いがあります。リストを文章の字下げの目的だけで使うのはやめましょう。字下げは、スタイルシートなどによって記述すべきスタイル指定です。

10.2 順不同リスト (UL要素)、 番号つきリスト (OL要素)、リスト項目 (LI要素) について(Unordered lists (UL), ordered lists (OL), and list items (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」です。属性値の形式は整数ですが、必ずしも表示が数字形式とはならないことにご注意ください。すなわち、例えばリスト項目の形式指定がラテン文字の大文字(ABC...)だった場合、「 start=3」の指定は「C」番目と表示されます。項目形式が小文字のローマ数字だった場合には「 start=3」の指定は「iii」番目と表示されます。
value = number [CN]
非推奨。 LI要素だけの属性です。この属性は、当該リスト項目が何番目であるかを設定するものです。属性値の形式は整数ですが、必ずしも表示が数字形式とはならないことにご注意ください。(「start」属性と同様です。)
compact [CI]
非推奨。 この論理型属性が設定されていた場合、グラフィック系のユーザエージェントはリストをなるべく狭い面積の中で表示しようとします。実際の表示方法はユーザエージェントの実装に依存します。

別途定義がある属性

番号つきリストも順不同リストも、視覚系ユーザエージェントによる「順番表示」の部分を除いて、全く同じ方法で表示されます。個々のユーザエージェントにより、順番表示の表現は様々になされます。順不同リストには番号が振られません。

どちらの方式のリスト要素も、LI要素によって指定されるリスト項目を列記するものです。(「LI」要素の終了タグは省略可能。)

基本的なリスト構造の例を下に挙げます。

<UL>
   <LI> ... 第1項 ...
   <LI> ... 第2項 ...
   ...
</UL>

リストは入れ子にもできます。

非推奨例(DEPRECATED EXAMPLE):

<UL>
     <LI> ... 大項目の1番目...
     <OL> 
        <LI> ... 中項目の1番目...
        <LI> ... 中項目の2番目...
        <OL start="10"> 
           <LI> ... 小項目の1番目...
        </OL> 
        <LI> ... 中項目の3番目...
     </OL> 
     <LI> ... 大項目の2番目...
</UL>

番号つきリストの番号指定について。番号つきリストでは、あるリストの番号を、直前のリストの番号から引き継いで自動的に通し番号を打ったり、あるリストの中で幾つかのリスト項目の番号を隠したり、というようなことはできません。けれども、リスト表記の際にvalue 属性による番号指定を行うことなら可能です。「value」の属性値が与えられた部分以下は、その値から始まる順番の番号が割り当てられます。

<ol>
<LI value="30"> 左記の指定でこの項の番号は30番になります。
<LI value="40"> 左記の指定でこの項の番号は40番になります。
<LI> そしてこの項目の番号は41番になります。
</ol>

10.3 定義リストについて: DLDTDD要素(Definition lists

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

開始タグ: 必要、終了タグ: 省略可能

別途定義がある属性

定義リストと他の方式とのほんのちょっとの違いは、リスト項目が2つの部分、用語部分と叙述部分から成り立っているという部分です。用語部分は、行内コンテンツのみを内容とするDT要素として記述し、叙述部分はブロック系コンテンツを内容とできるDD要素として記述します。

定義リストの例を示します。

  
<DL>
  <DT>Dweeb ドゥイーブ
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>
      熱中しやすい気質で、大きくなると「<EM>Nerd</EM> ナード」や
      「<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 リストの視覚的表現方法Visual rendering of lists

注。 以下は現在の視覚系ユーザエージェントがリストの表示をするときにどのような方法を採っているかを参考として記すものです。リストの表示形式をコントロールするにはスタイルシートを使う方がより巧く行くでしょう。(例えば番号付けの方法や、各言語に依存する表記法、字下げ、など。)

視覚系ユーザエージェントは一般に、入れ子になったリストについて、その階層に応じて字下げしています。

OL要素とUL要素のtype 属性が、リスト項目の目印表示形式を指定するために使われています。

UL要素のtype属性として設定可能な値は、 discsquarecircleです。無指定の場合の既定値は、リストの階層によって異なります。これらの値は大文字小文字を区別しません。

指定された属性値をどのように表現するかはユーザエージェントまかせになっています。各ユーザエージェントは、なるべく、値「disc」を黒丸で表示し、「circle」を白丸、「square」を白四角で表すようにしてください。

グラフィック系ユーザエージェントでの表示は、次のようになるでしょう。

「disc」による黒丸表示の例は値が「disc」の場合
「circle」による白丸表示の例は値が「circle」の場合
「square」による白四角表示の例は値が「square」の場合

OL要素が取りうるtype属性値は、次のようになります。(この値は大文字小文字を区別します。)

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> ステップ1 ...  
<LI> ステップ2 ...
</OL>
</BODY>

定義リストの表示方法もまた、ユーザエージェントに依存します。例えば、

<DL>
  <DT>Dweeb ドウィーブ
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>
      熱中しやすい気質で、大きくなると「<EM>Nerd</EM> ナード」や
      「<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
      熱中しやすい気質で、大きくなると「Nerd ナード」や
      「Geek ギーク」になったりする。
Cracker クラッカー
       hacker on the Internet
       インターネット上のハッカー。
Nerd ナード
       male so into the Net that he forgets his wife's birthday
       ネット生活に夢中で妻の誕生日を忘れるような男。

10.4 DIR要素とMENU要素(The DIR and MENU elements

「DIR」要素も「MENU」要素も非推奨です。

両者の文書型定義についてはTransitional DTDをご覧下さい。

別途定義がある属性

DIR要素は1行複数項目表示のディレクトリリスト生成に使うよう設計されました。MENU要素は1行1項目のメニューリストに使うよう設計されました。どちらの要素もUL要素と同じ構造であり、表示方法が違うだけです。実際には、ユーザエージェントはDIR要素やMENU要素をUL要素のリストと全く同様に表示するでしょう。

本仕様では、これらの要素の代わりにUL要素を用いることを強く推奨します。



訳者代表:内田明 (UCHIDA Akira)
email: uchida@happy.email.ne.jp
1999/8/14版