■ リストの作成

リストを生成する方法はいろいろありますが、様々な制約もあります。正しい記述法と応用を身につけて自分らしさを表現しましょう。スタイルシートの応用を使うことでリストを表示させる変化にとんだ楽しいリストが作成できます。

■ 基本的な番号なしリスト

リストは、箇条書きなどのような表現に適しています。その基本となるのが番号なしリストで、ul要素で囲んで作成します。

例えば、以下のリストはブラウザの銘柄を表わしたものです。

• Microsoft Internet Explorer
• Netscape
• iCab
• Opera
• Mozilla
• Lynx
• IBM HomePage Reader

この構文のソースコードは以下のとおりです。

<ul>
<li>Microsoft Internet Explorer</li>
<li>Netscape</li>
<li>iCab</li>
<li>Opera</li>
<li>Mozilla</li>
<li>Lynx</li>
<li>IBM HomePage Reader</li>
</ul>

最も簡単で基本的な表であることがお分かりいただけたでしょうか。なお、リスト項目を表わす li要素は、終了タグを省略することが可能となっています。ただし、将来を考えたとき、なるべく終了タグを記述するように心がけましょう。

このリストの行頭に「黒丸」がつけられていますが、これを「マーカー」と呼び、任意にこのマーカーの形式を変更することができます。マーカーの変更については、スタイルシートの応用で解説します。

PageTop

■ 番号付きリスト

番号をマーカーに付ける場合は、ul要素を、ol要素に変更するだけで行います。以下はその実行サンプルです。

1. Microsoft Internet Explorer
2. Netscape
3. iCab
4. Opera
5. Mozilla
6. Lynx
7. IBM HomePage Reader

マーカーが数字の番号に置き換わって表現されます。なお、数字の形式はスタイルシートを利用することで変更することが可能です。

PageTop

■ リストのネスティング

番号なし、あるいは番号付きリストは、リストの中にリストを配置するネスティング (入れ子) にすることもできます。リストの中で更にリストを追加する場合には、必ずリストアイテムを定義する li要素の中で配置します。

以下は、リストのネスティングの構文とその実行結果です。

<ul>
<li>Microsoft Internet Explorer
　<ul>
　　<li>Windows MSIE 4.0</li>
　　<li>Windows MSIE 4.5</li>
　　<li>Macintosh MSIE 4.5</li>
　</ul></li>
<li>Netscpe Navigator
　<ul>
　　<li>Windows Netscape Navigator 4.78</li>
　　<li>Macintosh Netscape 6.0</li>
　　<li>Linux Netscape 7.1</li>
　</ul></li>
</ul></dd>

実行結果は以下のとおりです。

• Microsoft Internet Explorer
  • Windows MSIE 4.0
  • Windows MSIE 4.5
  • Macintosh MSIE 4.5
• Netscpe Navigator
  • Windows Netscape Navigator 4.78
  • Macintosh Netscape 6.0
  • Linux Netscape 7.1

PageTop

■ スタイルシートの応用

リストの項目のマーカーには、デフォルトで黒丸、あるいは数字が入りますが、スタイルシートでは、list-style-typa属性を利用することで、様々な形式のマーカーに変更します。以下はそのサンプルです。

square 四角のマーカー

• Microsoft Internet Explorer
• Netscape Navigator
• Mozilla Firefox

circle 白丸のマーカー

• Microsoft Internet Explorer
• Netscape Navigator
• Mozilla Firefox

image 画像によるマーカー

• Microsoft Internet Explorer
• Netscape Navigator
• Mozilla Firefox

小文字のアルファベットによるマーカー

• Microsoft Internet Explorer
• Netscape Navigator
• Mozilla Firefox

大文字のアルファベットによるマーカー

• Microsoft Internet Explorer
• Netscape Navigator
• Mozilla Firefox

PageTop

■ 定義リスト

リストには、「定義リスト」というもう１つの要素があります。なにやら難しいリストのように思えますが、実際にはそれほどでもありません。

定義リストの仕組みは、基本的に以下の3つの要素で構成されます。

　dl要素　定義リストを定義する
　dt要素　定義用語を定義する
　dd要素　定義用語の解説

具体的な構文は以下のとおりです。

 <dl>
  <dt>定義リストとは</dt>
   <dd>基本的に定義された用語とその解説で成り立っています。</dd>
 </dl>

「定義用語」と「定義した用語の解説」の組み合わせとして説明していますが、実際には、「小見出し」とその「段落」などというような使い方もできます。実際にこのページの大半が定義リストを使って表現しています。

定義リストを定義する dl要素 の中には、最低１個以上の dt要素 あるいは dd要素 を配置しなければなりません。また、dd要素 のみの配置でも許されています。

なお。dl要素、dd要素 は終了タグを省略することも可能です。ただし、将来を見据えてできるだけ終了タグを記述するように心がけましょう。

PageTop / Home / Index / Next

初版公開日 2002年7月27日   最新更新日 2004年3月7日

Copyright(C) 2002〜2008 banban