10 リスト

目次

  1. リストの概説
  2. 順不同リスト (UL)、 序列リスト (OL)、及びリスト項目(LI)
  3. 定義リスト: DLDT、及びDD要素
    1. リストの視覚的レンダリング
  4. DIR要素と MENU要素

10.1 リストの概説

HTMLは著者に対して、リスト情報を指定するための幾つかのメカニズムを提供する。どのリストも、1つ以上のリスト要素を含まねばならない。リストには、次の内容が含まれ得る。

例えば、上のリストは、順不同のリストであり、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)

<!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> …最初のリスト項目…
   <LI> …2番目のリスト項目…
   ...
</UL>

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

推奨しない例:

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

番号順に関する詳細 序列リストにおいて、リストの番号付けを前のリストから自動的に引き継いだり、あるリスト項目の番号を隠したりすることは、できない。 しかし、著者は、value属性を設定してリスト項目の番号を再設定することができる。後続のリスト項目の番号付けは、その新しい値から続行する。その例を次に示す。

<ol>
<li value="30"> 左の設定で、この項目の番号は30となる。
<li value="40"> 左の設定で、この項目の番号は40となる。
<li> そして、この項目の番号は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 --
  >

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

別途定義がある属性

定義リストは他の形式のリストとは少しだけ異なり、リスト項目が、用語と記述という2つの部分から構成される。 用語はDT要素で示され、行内内容に制限される。 記述は、ブロックレベル内容を取るDD要素で示される。

次に例を示す。

  
<DL>
  <DT>Dweeb ドゥイーブ
  <DD>熱中しやすい若者で、大きくなると
  「<EM>Nerd</EM>」や「<EM>Geek</EM>」になったりする。

  <DT>Hacker ハッカー
  <DD>腕のいいプログラマ

  <DT>Nerd ナード
  <DD>技術には詳しいが社会性がない人
</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属性が取り得る値は、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>熱中しやすい若者で、大きくなると
  「<EM>Nerd</EM>」や「<EM>Geek</EM>」になったりする。

  <DT>Hacker ハッカー
  <DD>腕のいいプログラマ

  <DT>Nerd ナード
  <DD>技術には詳しいが社会性がない人
</DL>

以下のようにレンダリングされるであろう。

Dweeb ドゥイーブ
       熱中しやすい若者で、大きくなるとNerdGeekに
       なったりする。
Hacker ハッカー
       腕のいいプログラマ
Nerd ナード
       技術には詳しいが社会性がない人

10.4 DIR要素とMENU要素

DIRもMENUも推奨しない

公式の定義については移行型DTDを参照されたい。

別途定義がある属性

DIR要素は、複数の段から成るディレクトリリストの生成に用いるよう設計された。 MENU要素は、単一の段から成るメニューリストに用いるよう設計された。 どちらもUL要素と同じ構造を持ち、レンダリングだけが異なっている。 実際には、ユーザエージェントはDIRリストやMENUリストを、ULリストと全く同様にレンダリングするであろう。

本仕様では、両要素の代わりに UL要素を用いるよう、強く推奨する。


訳者代表: 内田明 (UCHIDA Akira)
email: uchida@happy.email.ne.jp