list-style

Updated / Published

list-styleプロパティはlist-style-imageプロパティ, list-style-positionプロパティ, list-style-typeプロパティのリスト項目要素のマーカーに関する3つのプロパティをまとめて設定するショートハンド（CSSにおいて値を簡略化できる記法のこと）です。

値
初期値
個別のプロパティの初期値を参照
適用対象
リスト項目要素（li要素）
継承
する
メディア
visual

値の指定方法は、各プロパティの値を半角スペースで区切って並べます。記述する際に各プロパティの値を並べる順序は特に決まっておらず、また必要のない指定は省略することができます。たとえば、マーカー（行頭記号）を表示しないようにするだけの場合は、"list-style : none ;" とだけ簡略記述することができます。ただし、値を省略すると、省略された部分の各個別のプロパティの初期値が適用されることになります。

マーカーに形状と画像の両方を指定した場合、指定の形状よりも画像が優先して表示され、何らかのトラブルで画像が表示できない場合や画像の表示に対応していない・あるいは表示しない設定にしている環境においては指定の形状で表示します。このため画像を指定する場合は、形状もあわせて指定すると良いでしょう。また、"list-style : none ;" とだけ指定した場合、list-style-imageプロパティと list-style-typeプロパティの両プロパティの値に "none" を指定していることになるので注意してください。

リスト関連プロパティ

list-style-image
リスト項目のマーカーに表示する画像を指定する
list-style-position
リスト項目の主要ボックスに対するマーカーの位置を指定する
list-style-type
リスト項目のマーカーの形状を指定する
  • none
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • decimal-leading-zero
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha
  • lower-latin
  • upper-latin
  • lower-greek
  • inherit

list-style-typeプロパティの hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha のキーワードはCSS2仕様で定義されましたがCSS2.1仕様より削除されました。

list-styleプロパティの実装状況

IE
◯：list-style-type に未実装のキーワードあり
IE6, 7はnone, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-romanのみのサポート
IE8よりlower-latin, upper-latin, lower-greek, armenian, georgianを追加サポート
CSS2.1仕様で削除された hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha は未サポート
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

サンプル

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