ぱそおーるCSS講座

リストマークを設定する
list-style-type : キーワード;

ブラウザで対応していないキーワードがあります。
リストに画像を設定すると、そちらが優先されます。
<ul><ol>タグ内の<li>タグにも設定出来ます。

キーワードは沢山ありますが、IEに対応しているものを掲載します。

1. none : リストマークなし
2. disc : 黒丸
3. circle : 白丸
4. square : 黒四角
5. decimal : 数字
6. lower-alpha : アルファベット小文字
7. upper-alpha : アルファベット大文字
8. lower-roman : ローマ字小文字
9. upper-roman : ローマ字大文字

記述例
<ol style="list-style-type : decimal;">
<li style="list-style-type : upper-roman;">

1. 非表示
2. 黒丸
3. 白丸
4. 黒四角
5. 数字
6. アルファベット小文字
7. アルファベット大文字
8. ローマ字小文字
9. ローマ字大文字

リストマークの位置を設定する
list-style-position : キーワード;

<ul><ol>タグ内の<li>タグにも設定出来ます。

キーワードは２種類です。

1. outside : リストマークを項目の外に表示（デフォルト）
2. inside : リストマークを項目の中に表示

記述例
<ol style="list-style-position : inside;">

1. これがデフォルトです。
   項目外に表示されています。
2. こっちはinsideで表示しています
   項目内に表示されます。

リストマークに画像を設定する
list-style-image : キーワード、url(画像ファイル名);

リストークに画像を設定すると、list-style-typeで指定したリストマークよりも優先されます。
画像の読み込みに失敗した場合などはlist-style-typeで表示されます。
<ul><ol>タグ内の<li>タグにも設定出来ます。

キーワードはnoneしか存在しません。
noneを設定するとdiscで表示されます。

記述例
<ul style="list-style-image : url(mark.gif;)">
<li style="list-style-image : url(mark.gif);">

• リストマークが指定した画像に変更されました

リストマークをまとめて設定する
list-style : type position image;

list-style-type : 省略可能
list-style-position : 省略可能
lost-style-image : 省略可能

記述例
<ol style="list-style : square inside;">

1. リストマークを四角形に設定しました。
   表示は項目内にしてみました