list-style-type

Updated / Published

list-style-typeプロパティは、リスト項目のマーカー（行頭記号）の形状を指定します。なお、同一要素にマーカーに用いる画像（イメージ）が list-style-imageプロパティで指定されている場合は、画像の表示が優先されます。ただし、何らかのトラブルで画像が表示できない場合や画像の表示に対応していない・あるいは表示しない設定にしている環境においては、list-style-typeプロパティの値が有効になります。

値
  • none
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • decimal-leading-zero
  • lower-latin
  • upper-latin
  • lower-greek
  • armenian
  • georgian
  • hebrew
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha
  • inherit
初期値
disc
適用対象
リスト項目要素（li要素）
継承
する
メディア
visual

list-style-typeプロパティの値

list-style-typeプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。形状を指定するキーワードには CSS1 仕様より定義されている9種類と、CSS2 仕様で追加された12種類をあわせて、計21種類のキーワードがあります。

CSS1 仕様より定義されているキーワード9種類

none
マーカー（行頭記号）を表示しない
disc
黒丸（UA 依存）
circle
円の丸（UA 依存）
square
黒の四角（UA 依存）
decimal
算用数字（1, 2, 3, 4...）
lower-alpha
英小文字（a, b, c, d...）
upper-alpha
英大文字（A, B, C, D...）
lower-roman
小文字のローマ数字（i, ii, iii, iv...）
upper-roman
大文字のローマ数字（I, II, III, IV...）

CSS2 仕様より追加定義されたキーワード12種類

decimal-leading-zero
0を上位につけた算用数字（01, 02, 03, 04...）
lower-latin
lower-alpha と同じ、小文字のローマ数字（i, ii, iii, iv...）
upper-latin
upper-alpha と同じ、大文字のローマ数字（I, II, III, IV...）
lower-greek
小文字のギリシア文字（α, β, γ, δ...）
armenian
アルメニア文字の数字（アルメニア数字）
georgian
グルジア文字の数字（グルジア数字）
hebrew
ヘブライ文字の数字（ヘブライ数字）
cjk-ideographic
漢数字（一, 二, 三, 四...）
hiragana
平仮名（あ, い, う, え...）
katakana
片仮名（ア, イ, ウ, エ...）
hiragana-iroha
平仮名のいろは（い, ろ, は, に...）
katakana-iroha
片仮名のイロハ（イ, ロ, ハ, ニ...）

CSS2.1 仕様では、"hebrew", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha" の6種類のキーワードは削除されましたが、これらについては今後のCSS List moduleでの再定義が予想されます。また、今後世界のより多くの数字体系に対応していく見通しです。

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

IE
◯：未実装のキーワードあり
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
◯
CSS2 仕様 list-style-typeプロパティにおける実装状況一覧
UA / Keyword IE6,7 IE8+ Chrome Firefox Safari Opera
none ◯ ◯ ◯ ◯ ◯ ◯
disc ◯ ◯ ◯ ◯ ◯ ◯
circle ◯ ◯ ◯ ◯ ◯ ◯
square ◯ ◯ ◯ ◯ ◯ ◯
decimal ◯ ◯ ◯ ◯ ◯ ◯
lower-roman ◯ ◯ ◯ ◯ ◯ ◯
upper-roman ◯ ◯ ◯ ◯ ◯ ◯
lower-alpha ◯ ◯ ◯ ◯ ◯ ◯
upper-alpha ◯ ◯ ◯ ◯ ◯ ◯
decimal-leading-zero × ◯ ◯ ◯ ◯ ◯
lower-latin × ◯ ◯ ◯ ◯ ◯
upper-latin × ◯ ◯ ◯ ◯ ◯
lower-greek × ◯ ◯ ◯ ◯ ◯
armenian × ◯ ◯ ◯ ◯ ◯
georgian × ◯ ◯ ◯ ◯ ◯
hebrew × × ◯ ◯ ◯ ◯
cjk-ideographic × × ◯ ◯ ◯ ◯
hiragana × × ◯ ◯ ◯ ◯
katakana × × ◯ ◯ ◯ ◯
hiragana-iroha × × ◯ ◯ ◯ ◯
katakana-iroha × × ◯ ◯ ◯ ◯

Internet Explorer 6, 7は、CSS2 仕様より追加定義された12種類のキーワードには全く対応していませんが、IE8より、lower-latin, upper-latin, lower-greek, armenian, georgianを追加サポートしています。

なお、対応していないキーワードが指定されると、初期値が適用されるのではなく、UA ごとに標準で設定されているキーワードが適用されて、その形状で表示されることになるようです。Internet Explorerでは "disc" が適用され、さらにネスト（入れ子）されている場合は "circle" が適用されるという具合になります。その他のブラウザでは、算用数字の "decimal" が適用されることになります。

サンプル

ul.none            { list-style-type : none ; }
ul.disc             { list-style-type : disc ; }
ul.circle           { list-style-type : circle ; }
ul.square         { list-style-type : square ; }
...
ul.lower-greek { list-style-type : lower-greek  ; }