リスト

リスト

list-style

list-style-type、 list-style-position および list-style-image を一度に指定できる簡略化プロパティです。

この簡略化プロパティでは、指定する順番は関係ありません。 またすべてのプロパティの値を指定する必要もありません。

ul { list-style : circle outside url(marker.gif) ; }
ul { list-style : none ; }

list-style-type

リストマーカーの種類を指定します。

このプロパティは、list-style-image が指定されていない場合や、 画像を用いることができない場合にのみ有効です。

順不同リスト用の値

none

リストマーカーを表示しません。

disc

UA 依存ですが、通常は塗りつぶされた丸を表示します。

circle

UA 依存ですが、通常は丸を表示します。

square

UA 依存ですが、通常は塗りつぶされた四角を表示します。

番号付きリスト用の値

decimal

十進法の数字を表示します。( 1、2、3、4 )

decimal-leading-zero

最初に ゼロ（ 0 ）を加えた十進法の数字を表示します。( 01、02、03、04 )

lower-roman

小文字のローマ数字を表示します。( i、ii、iii、iv)

upper-roman

大文字のローマ数字を表示します。( I、II、III、IV )

hebrew

ヘブライ数字を表示します。

armenian

アルメニア数字を表示します。

georgian

グルジア数字を表示します。

cjk-ideographic

漢数字を表示します。( 一、二、三、四 )

lower-greek

小文字の古代ギリシャ文字で表示します。

lower-alpha

lower-latin

小文字のアルファベットで表示します。( a、b、c、d )

upper-alpha

upper-latin

大文字のアルファベットで表示します。( A、B、C、D )

hiragana

ひらがなで表示します。( あ、い、う、え)

katakana

カタカナで表示します。( ア、イ、ウ、エ)

hiragana-iroha

ひらがなのいろはで表示します。( い、ろ、は、に)

katakana-iroha

カタカナのいろはで表示します。( イ、ロ、ハ、ニ)

ul { list-style-type : circle ; }
ol { list-style : decimal ; }

list-style-image

リストマーカーとして使用する画像を指定します。

none

画像を使用せず、list-style-type で指定したリストマーカーを使用します。

URI

リストマーカーとして使用する画像ファイルの URI を指定します。

ul { list-style-image : url(marker.gif) ; }

list-style-position

リストマーカーの位置を指定します。

outside

リストマーカーのボックスをリストボックスの外側におきます。

inside

リストマーカーのボックスをリストボックスの内側におきます。

ul { list-style-position : inside ; }

marker-offset

リストとリストマーカーの距離を指定します。

このプロパティは、リストマーカー要素 ( display プロパティの値が、marker の :before または:after 疑似要素 ) にのみ指定可能です。

auto

指定せずに UA に任せます。

長さ

リストとリストマーカーの距離を長さで指定します。

li:before { display: marker; marker-offset: 3em; }