この項目ではリスト(箇条書き)について説明します。リストにはul要素(順序なし箇条書き)・ol要素(順序なし箇条書き)・dl要素(定義リスト)の3種類があります。順番に説明していきますね。
ul要素は、いわゆる箇条書きです。とりあえずソースを書いてみましょう。
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>順序なし箇条書き</title>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
ul要素はli要素のみを内容に持ちます。ul要素の中に直接文章を書いたり、他の要素を入れてはダメです。 li要素は内容としてブロック要素とインライン要素どちらも含むことが出来ます。img要素を内容にして図を箇条書きにしてみたり、p要素を使って文章を箇条書きにしてみたりできます。さらにli要素の内容をul要素にして、リストの中にリストを作ることも出来ます。
ol要素はul要素とよく似ていますが、内容のli要素に順序関係があります。料理の手順等を示したりするのに使います。書き方は以下の通り。
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>順序なし箇条書き</title>
</head>
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
</body>
</html>
これは項目とその説明という辞書のような形式をとる箇条書きです。dl要素はdt要素とdd要素を内容とします。dt要素が項目、dd要素がその説明にあたります。ここで注意しなければならないのはdt要素は内容としてインライン要素しか持つことが出来ないということです。dd要素についてはli要素と同様にブロック要素も内容に出来ます。以下に書き方の例を示します。
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>順序なし箇条書き</title>
</head>
<body>
<dl>
<dt>項目1</dt>
<dd>項目1の説明</dd>
<dt>項目2</dt>
<dd>項目2の説明</dd>
</ol>
</body>
</html>
この定義リストが一番取っ付きにくいかもしれませんね。ちょっと考え方を変えると便利なんですよ。「リンク先とその説明」を書いてリンク集を作ったり、「日付と更新内容」を書いて更新情報に使ったり、「カテゴリとその内容」を書いてナビゲーションを作ったりできます。
以上3つのリストのサンプルを以下に示します。例の如くダウンロードするなりして参考にしてください。
サンプル5_4：sample4_4.html