リストラベルの指定

リストには9種類のラベルがあり、それを指定します。

9種類ラベル

1. list-style-type:disc
2. list-style-type:circle
3. list-style-type:square
4. list-style-type:decimal
5. list-style-type:lower-roman
6. list-style-type:upper-roman
7. list-style-type:lower-alpha
8. list-style-type:upper-alpha

<ol style="list-style-type:lower-roman">
<li>小文字のローマ数字が頭に付く。</li>
<li>番号は自動的に進んでいきます。</li>
</ol>

1. 小文字のローマ数字が頭に付く。
2. 番号は自動的に進んでいきます。

HTMLでは<li>タグを閉じなくて良いですが、XHTMLでは閉じる必要があります。 将来的にXHTMLへの移行をお考えの場合は、閉じておいた方が移行しやすいと思います。

リストラベルに画像を指定　<url( )>

リストラベルは画像も使用できます。

1. list-style-image:url(***.gif)
2. ラベル用の適当な画像が無いのでGIFアニメを使ってみた。

<ol style="list-style-image:url(image/blink_white_o.gif)">
<li>list-style-image:url(***.gif)</li>
<li>ラベル用の適当な画像が無いのでGIFアニメを使ってみた。</li>
</ol>

リストの改行で始まる位置の指定　outside　inside

1. リストでも長い文章を書くと改行が必要になるので、
   改行された位置を outside にした場合。
2. outside は文章の頭がそろう。

<ol style="list-style-position:outside">
<li>リストでも長い文章を書くと改行が必要になるので、
改行された位置を outside にした場合。</li>
<li>outside は文章の頭がそろう。</li>
</ol>

1. リストでも長い文章を書くと改行が必要になるので、
   改行された位置を inside にした場合。
2. inside はリストラベルと文章の頭がそろう。

<ol style="list-style-position:inside">
<li>リストでも長い文章を書くと改行が必要になるので、
改行された位置を inside にした場合。</li>
<li>inside はリストラベルと文章の頭がそろう。</li>
</ol>

リストの一括指定　<list-style-type>　<list-style-image>　<list-style-position>

リスト関係の属性を一括指定する事もできます。

1. list-style-type を decimal にした。
2. list-style-position を outside にした。

<ol style="list-style:decimal outside">
<li>list-style-type を decimal にした。</li>
<li>list-style-position を outside にした。</li>
</ol>

1. list-style-image を url(image/blink_white_o.gif) にした。
2. list-style-position を inside にした。

<ol style="list-style:url(image/blink_white_o.gif) inside">
<li>list-style-image を url(image/blink_white_o.gif) にした。</li>
<li>list-style-position を inside にした。</li>
</ol>