■ リスト

この節では、リストを形成する要素および CSSについて解説します。リストとは、箇条書きなどを表示させるテキストの形成です。リストの行頭のマーカーなどを変更させることが可能です。

リストの設定

いわゆる箇条書きを表示させるリストの設定です。一般的な視覚系ブラウザでは、行頭に黒丸が設定されている場合が多いようです。このページのメニューにリストを設定しています。

<ul>
<li>箇条書きリストその1</li>
<li>箇条書きリストその2</li>
<li>箇条書きリストその3</li>
</ul>

ul要素は、リストを設定するブロックレベル要素です。基本的には、li要素のみ配置して、リストの項目を記述します。なお、HTMLでは、li要素の終了タグを省略することが可能です。

また、このリストを設定する ul要素を、li要素中にネストして入れ子にすることも可能です。

数字によるリストマーカーの設定

リストの行頭に数字を用いて、番号順に箇条書きを表示させる設定です。
<ol>
<li>箇条書きリストその1</li>
<li>箇条書きリストその2</li>
<li>箇条書きリストその3</li>
</ol>

ol要素は、リスト項目の行頭に数字を用いて、順番に表示させます。

以下にサンプルを提示します。行頭の番号は、1から始まります。

  1. 箇条書きリストその1
  2. 箇条書きリストその2
  3. 箇条書きリストその3

リストの行頭マーカーの設定

リスト項目のマーカーの設定は任意に行うことができます。

<ul type="disc">   黒丸のマーカー   (非推奨)
<ul type="circle">  白丸のマーカー   (非推奨)
<ul type="square">  黒四角のマーカー (非推奨)

推奨されているスタイルシートによる設定は下記の通りです。その表現は非常に多く設定されています。ただし、ブラウザ側でサポートされていないものが多いようです。

CSS記述機能
ul { list-style-type: disc }黒丸のマーカー
ul { list-style-type: circle }白丸のマーカー
ul { list-style-type: square }黒四角のマーカー
ul { list-style-type: decimal }算用数字のマーカー
ul { list-style-type: lower-roman }ローマ数字の小文字のマーカー
ul { list-style-type: upper-romn }ローマ数字の大文字のマーカー
ul { list-style-type: lower-greek }ギリシャ文字の小文字のマーカー
ul { list-style-type: upper-greek }ギリシャ文字の大文字のマーカー
ul { list-style-type: decimal-leading-zero }行頭に 0 をつけた算用数字
ul { list-style-type: lower-alpha }アルファベットの小文字のマーカー
ul { list-style-type: upper-alpha }アルファベットの大文字のマーカー
ul { list-style-type: cjk-ideographic }漢数字のマーカー
ul { list-style-type: hiragana }ひらがなの「あいおうお」の順
ul { list-style-type: katakana }カタカナの「アイオウオ」の順
ul { list-style-image: url("marker.gif") }マーカーに画像を用いる設定

この他にもいろいろ設定されておりますが、詳しくは、CSSリファレンスの リスト を参照してください。

定義済みリストの設定

定義リストとは、定義内容を意味する dd要素と、定義用語を指す dt要素を組み合わせて、用語とその定義からなる定義リストを作成するために使います。

<dl>
  <dt>HTML</dt>
  <dd>HTMLとは、Hyper Text Markup Language の略である</dd>
</dl>

dl要素には、行頭のマーカーという概念はありません。また、HTMLでは dd要素の終了タグの省略が可能です。



This Page is HTML4.01 Valid! 初版更新日 2003/1/4
Copyright(C) 2002-2003 banban@scollabo.com