Let's begin XHTML―さあ始めよう XHTML

Section 9:箇条書き

 Section 5 では,パラグラフと見出しを説明した。ここでは,このような“文書中の大きな単位”のひとつとして,項目を連ねていく“箇条書き”を説明する。

順序のない箇条書き(列挙):ul 要素

 項目を列挙する,順序なし箇条書きは,ul 要素で表す。

<ul>...</ul>

ul 要素は,その範囲がひとまとまりの箇条書きであることを示す。箇条書きはいくつかの項目からなり,その項目は,ul 要素の内容として li 要素を入れ子にして書く。

<li>...</li>

したがって,順序のない箇条書きは次のように書かれる。

<ul>
<li>
...</li>
<li>
...</li>
...
</ul>

 ul 要素は,その内容に li 要素のみを書くことができる。ただし,項目がひとつもないのはいけない。li 要素は,内容としてテキストなどを含むことができる。見出しやパラグラフは,ul 要素を内容としてはならない。

 箇条書きの例をご覧いただこう。

<h3>Academic HTML 4.0 の CSS1 チュートリアル</h3>
<ul>
<li><a href="http://www.tg.rim.or.jp/~hexane/ach/fscs/">First step CSS</a></li>
<li><a href="http://www.tg.rim.or.jp/~hexane/ach/sfcs/">Step forward CSS</a></li>
<li><a href="http://www.tg.rim.or.jp/~hexane/ach/tocs/">Take off with CSS</a></li>
</ul>

上の例は,3 つの項目のある箇条書きである。参考までに,お手元の環境では次のように出力される。

Academic HTML 4.0 の CSS1 チュートリアル

順序のある箇条書き(番号つきリスト):ol 要素

 ul 要素に対して,順序のある箇条書きol 要素で表す。

<ol>...</ol>

これは,項目に順序があることを除いては,ul 要素と同じである。項目も li 要素で示す。順序あり箇条書きは,次のように書かれることになる。

<ol>
<li>
...</li>
<li>
...</li>
...
</ol>

 順序あり箇条書きの例をご覧いただこう。

<ol>
<li>本郷三丁目から営団丸ノ内線で赤坂見附へ</li>
<li>営団銀座線に乗り換え,渋谷へ</li>
<li>京王井の頭線に乗り換え,久我山下車</li>
</ol>

参考に,お手元の環境での出力をご覧いただこう。

  1. 本郷三丁目から営団丸ノ内線で赤坂見附へ
  2. 営団銀座線に乗り換え,渋谷へ
  3. 京王井の頭線に乗り換え,久我山下車

見出しつき箇条書き(定義リスト):dl 要素

 もうひとつの箇条書きは,辞書のように“見出し”と“説明”のようになっているものである。定義リストとも呼ばれる。これは,dl 要素で表す。

<dl>...</dl>

これも,ひとまとまりの箇条書きを表しており,その中に項目をあげていく。項目には dt 要素(見出し)と dd 要素(説明)の 2 種類がある。

<dt>...</dt>
<dd>
...</dd>

 dl 要素の内容は,dt 要素および dd 要素のみである。項目がひとつもないのはいけない。dt 要素および dd 要素には,テキストなどを含むことができる。見出しつき箇条書きは,見出しやパラグラフの内容にはなれない。

 見出しつき箇条書きは,一般に次のような形になる。

<dl>
<dt>
...</dt>
<dd>
...</dd>
<dt>
...</dt>
<dd>
...</dd>
...
</dl>

 dt 要素と dd 要素は,必ずしも交互に出現する必要はないが,見出しつき箇条書きは上記のような形式がほとんどだろう。

 最後に,見出しつき箇条書きの例を示しておこう。

<dl>
<dt>RISC</dt>
<dd>単純な命令セットを持つマイクロプロセッサの総称。</dd>
<dt>CISC</dt>
<dd>複雑な命令セットを持つマイクロプロセッサの総称。</dd>
</dl>

これも,参考に,お手元の環境での出力をご覧いただこう。

RISC
単純な命令セットを持つマイクロプロセッサの総称。
CISC
複雑な命令セットを持つマイクロプロセッサの総称。