HTML リスト（箇条書き）

　HTMLでは、次のようなリスト（箇条書き）を記述するためのタグが用意されています。

• item 1
• item 2
• item 3

　リストの記述では、リストの開始を終了を示すタグ（<UL>や<OL>）と個々の項目（要素）を示す<LI>タグを使用します。上記の例のコードは以下のようになります。

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

　OLタグは本来は番号付きリストの開始と終了を示すためのタグでしたが、HTML5では仕様が変更され、項目の先頭に固定文字を置いたり、項目だけを表示することもできるようになりました。これにより従来番号無しリストで使用していたULタグの必要性がかなり少なくなっています。 　リストの先頭の文字を「マーカー」と呼びます。マーカーはstyleのlist-style-typeプロパティによって設定します。 書式

<OL style="list-style-type: プロパティ値">

プロパティ値	マーカー	例
decimal	算用数字	項目 1 項目 2 項目 3
decimal-leading-zero	算用数字（先頭に0）	項目 1 項目 2 項目 3
lower-alpha	アルファベット小文字	項目 1 項目 2 項目 3
upper-alpha	アルファベット大文字	項目 1 項目 2 項目 3
lower-roman	ローマ数字小文字	項目 1 項目 2 項目 3
lower-greek	ギリシャ文字小文字	項目 1 項目 2 項目 3
disc	黒丸	項目 1 項目 2 項目 3
circle	白丸	項目 1 項目 2 項目 3
square	黒四角	項目 1 項目 2 項目 3
none	マーカー文字無し	項目 1 項目 2 項目 3
hiragana	あいうえお順	項目 1 項目 2 項目 3
katakana	アイウエオ順	項目 1 項目 2 項目 3
cjk-ideographic	漢数字	項目 1 項目 2 項目 3
hiragana-iroha	いろはにほへと順	項目 1 項目 2 項目 3
katakana-iroha	イロハニホヘト順	項目 1 項目 2 項目 3
armenian	アルメニア数字	項目 1 項目 2 項目 3
georgian	グルジア数字	項目 1 項目 2 項目 3
hebrew	ヘブライ数字	項目 1 項目 2 項目 3
lower-latin	ラテン文字小文字	項目 1 項目 2 項目 3
upper-latin	ラテン文字大文字	項目 1 項目 2 項目 3
initial	CSSで設定したデフォルトを適用
inherit	親要素のプロパティを継承

コード例

<ol style="list-style-type: upper-latin">
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ol>

　list-style-imageプロパティを使えば、マーカーに画像を表示することもできます。

1. item 1
2. item 2
3. item 3

書式

書式１　<OL style="list-style-image: url(画像ファイルのURL)">
書式２　<OL style="list-style-image: inherit">
書式３　<OL style="list-style-image: none">

プロパティ値	意味
url(img)	imgに画像ファイルへのURLをセットするとリストの各項目の先頭に指定された画像が表示される
inherit	親要素のプロパティ値を継承
none	項目の先頭に画像を表示しない

使用例（コード）

<ol style="list-style-image: url(http://books-nekoya.jp/Programming/faviconPrg.png)">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

　reversed属性を使えば、リストの番号を逆順に表示することができます。

属性値	意味
"reversed"	リストの番号を逆順表示

表示例

1. item 1
2. item 2
3. item 3

　start属性を使えば、リスト番号の開始番号を指定することができます。

属性値	意味
n	リスト番号の開始番号

使用例（表示）

10. item 1
11. item 2
12. item 3

使用例（コード）

<ol start="10">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>