10 リスト(Lists

この章の目次

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

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 %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 %inline;)*           -- definition term -->
<!ELEMENT %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 要素を話の内容にあてる、というようなものがあります。

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」を使って、ローマ数字による順序づけリストを実現するのに、次のように書くことができます。下の例で、本文に他のOL要素があったとしても、「"withroman"」というクラス指定があるものだけ、リスト番号がローマ数字で打たれることになります。

<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要素のリスト表示と同じ形式で表示するユーザエージェントもあります。

本仕様では、この「DIR」要素や「MENU」要素の代わりにUL要素を使うよう、強く求めます。