list-style-type

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
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
lower-latin
upper-latin
lower-greek
inherit

初期値

disc

適用対象

リスト項目要素（li要素）

継承

する

メディア

visual

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…）
hebrew: ヘブライ文字の数字（）
armenian: アルメニア文字の数字（）
georgian: グルジア文字の数字（）
cjk-ideographic: 漢数字（一, 二, 三, 四…）
hiragana: 平仮名（あ, い, う, え…）
katakana: 片仮名（ア, イ, ウ, エ…）
hiragana-iroha: 平仮名のいろは（い, ろ, は, に…）
katakana-iroha: 片仮名のイロハ（イ, ロ, ハ, ニ…）
lower-latin: lower-alpha と同じ、小文字のローマ数字（i, ii, iii, iv…）
upper-latin: upper-alpha と同じ、大文字のローマ数字（I, II, III, IV…）
lower-greek: 小文字のギリシア文字（α, β, γ, δ…）

CSS2 仕様より追加されたキーワードについては、現在の主要視覚ブラウザの対応は極端に遅れています。なお、改訂版の CSS2.1 仕様では、"hebrew", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha" の6種類のキーワードが削除される予定です。今後の list-style-typeプロパティのキーワードは世界のより多くの数字体系に対応する見通しです。

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

Windows版Internet Explorer: ○
Firefox: ○
Opera: ○
Safari: ○
Macintosh版Internet Explorer 5: ○

CSS2 仕様 `list-style-type`プロパティにおける UA の実装状況
UA / Keyword	Win IE6,7	Netscape	Firefox	Opera	Mac IE5	Safari
UA / Keyword	Win IE6,7	Netscape	Firefox	Opera	Mac IE5	Safari
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	×	○	○	○	×	○

Netscape, Firefox の Gecko系レンダリングエンジンの対応は良好ですが、Windows版・Macintosh版ともに Internet Explorer は、CSS2 仕様より追加定義された12種類のキーワードには全く対応していません。なお、対応していないキーワードが指定されると、初期値が適用されるのではなく、UA ごとに標準で設定されているキーワードが適用されて、その形状で表示されることになるようです。たとえば、Windows版Internet Explorer 6, Windows版Internet Explorer 7、及び Macintosh版Internet Explorer 5 では "disc" が適用され、さらにネスト（入れ子）されている場合は "circle" が適用されるという具合になります。Netscape では、"?" の記号になります。Opera, Safari では算用数字の "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  ; }

表示例

list-style-positionP
Go to top

現在位置

W3G
CSS
リスト
list-style-type

ナビゲーション

World Wide Web Guide

ステータス情報

作者: 上田遼
公開: 2007-02-02T16:33:29+09:00
更新: 2008-12-29T04:30:38+09:00
URI: http://w3g.jp/css/list/list-style-type

検索