list-style-imageプロパティ

リストの行頭記号の代わりに表示する画像を指定します。値は、url() の形式で、括弧内に画像のURIを指定します。

例)

list-style-image: url(arrow/point.gif);

※list-style-imageプロパティは、子要素にも継承される為、親要素である ul要素や、ol要素をセレクタとする事が推奨されています。


list-style-typeプロパティ

リストの行頭記号の表示形式を指定します。

値(CSS 1より定義されている値)

  • none(表示しない)
  • disc(黒丸)
  • circle(白丸)
  • square(黒四角)
  • decimal(算用数字 1, 2, 3 )
  • lower-alpha(英小文字 a, b, c )
  • upper-alpha(英大文字 A, B, C )
  • lower-roman(小文字ローマ数字 i, ii, iii )
  • upper-roman(大文字のローマ数字 I, II, III )

例)

list-style-type: lower-roman;

list-style-positionプロパティ

リストの行頭記号の表示位置を指定します。

値(CSS 1より定義されている値)

  • outside(初期値)
  • inside(リストの内容を表示するボックスの先頭に行頭記号を表示します。)

例)

list-style-position: inside;

list-styleプロパティ

list-style-imagelist-style-typelist-style-position、それぞれのプロパティの値を、list-styleプロパティで、まとめて指定することができます。

まとめて指定できる3種類のプロパティ値の、必要でない値は省略できます。省略された値は各プロパティの初期値(デフォルト値)が適用されます。


各プロパティの値は、半角スペースで区切って記述します。値の記述順序は特に決まっていません。

例)

list-style: url(arrow/point.gif) decimal inside;

なお、list-style-imageプロパティの値で指定した画像ファイルが何らかの原因で表示されなかった場合は、代替表示として、list-style-typeプロパティの値が表示されますのでlist-style-typeプロパティの値も一緒に指定するようにしましょう。

また、list-style-imageプロパティとlist-style-typeプロパティを一緒に指定した場合、list-style-imageプロパティの値が優先されます。