概要
list-style-type は li 要素の外観を設定する CSS プロパティです。厳密には、display:list-item の CSS スタイルを持つ要素を対象とするものであり、これをデフォルトスタイルとして持つ要素は <li> 要素のみです。しかし、display プロパティの値を操作すれば、全ての可視要素にこのスタイルを適用する事が可能となります。
ビュレット及びマーカーの色には、リストアイテムの color プロパティの計算値が適用されます。
構文
list-style-type: <list-style-type> | none | inherit
値
- none
- マーカーは表示されません。
<list-style-type> は以下のような種類を持ちます。
- disc
-
- 円形（初期値）
- circle
-
- 中空円
- square
-
- 塗りつぶされた四角形
- decimal
-
- 数値
- デフォルトでは 1. から始まります
- decimal-leading-zero
-
- 数値
- ゼロ埋めされて表示されます
- (01, 02, 03, ... 98, 99)
- lower-roman
-
- 小文字のローマ数字
- (i, ii, iii, iv, v, etc.)
- upper-roman
-
- 大文字のローマ数字
- (I, II, III, IV, V, etc.)
- lower-greek
-
- 小文字のギリシャ語
- アルファ、ベータ、ガンマ、...
- (α, β, γ, ...)
- lower-alpha | lower-latin
-
- 小文字の ASCII 文字
- (a, b, c, ... z)
lower-latinは IE7 以下ではサポートされていない…- Browser_compatibility の章も参照して下さい
- upper-alpha | upper-latin
-
- 大文字の ASCII 文字
- (A, B, C, ... Z)
upper-latinは IE7 以下ではサポートされていない…
- armenian
-
- 伝統的なアルメニア語のナンバリング
- (ayb/ayp, ben/pen, gim/keem, ...)
- georgian
-
- 伝統的なグルジア語のナンバリング
- (an, ban, gan, ... he, tan, in ...)
CSS 2.1 で削除されたが Gecko/Firefox や他のブラウザでサポートされているもの
- hebrew
-
- 伝統的なヘブライ語のナンバリング
- cjk-ideographic
-
- 表意文字によるナンバリング（言語によって異なる）
- CJK は (Chinese-Japanese-Korean) の意
- hiragana
-
- あ、い、う、え、お、か、き…
- 日本語の「あいうえお」
- katakana
-
- ア、イ、ウ、エ、オ、カ、キ…
- 日本語の「アイウエオ」
- hiragana-iroha
-
- い、ろ、は、に、ほ、へ、と…
- いろは歌
- katakana-iroha
-
- イ、ロ、ハ、ニ、ホ、ヘ、ト…
Mozilla による拡張
Mozilla (Firefox) が拡張した、様々な言語のマーカー。一部は他のブラウザでも実装されており、"-moz-" 接頭辞無しで動作します。
- arabic-indic
- -moz-arabic-indic
-
- Example
- bengali
- -moz-bengali
-
- Example
- cjk-earthly-branch
- -moz-cjk-earthly-branch
-
- Example
- cjk-heavenly-stem
- -moz-cjk-heavenly-stem
-
- Example
- devanagari
- -moz-devanagari
-
- Example
- -moz-ethiopic-halehame
-
- Example
- -moz-ethiopic-halehame-am
-
- Example
- ethiopic-halehame-ti-er
- -moz-ethiopic-halehame-ti-er
-
- Example
- ethiopic-halehame-ti-et
- -moz-ethiopic-halehame-ti-et
-
- Example
- -moz-ethiopic-numeric
-
- Example
- gujarati
- -moz-gujarati
-
- Example
- gurmukhi
- -moz-gurmukhi
-
- Example
- hangul
- -moz-hangul
-
- Example
- hangul-consonant
- -moz-hangul-consonant
-
- Example
- -moz-japanese-formal
-
- Example
- -moz-japanese-informal
-
- Example
- kannada
- -moz-kannada
-
- Example
- khmer
- -moz-khmer
-
- Example
- lao
- -moz-lao
-
- Example
- malayalam
- -moz-malayalam
-
- Example
- myanmar
- -moz-myanmar
-
- Example
- oriya
- -moz-oriya
-
- Example
- persian
- -moz-persian
-
- Example
- -moz-simp-chinese-formal
-
- Example
- -moz-simp-chinese-informal
-
- Example
- -moz-tamil
-
- Example
- telugu
- -moz-telugu
-
- Example
- thai
- -moz-thai
-
- Example
- -moz-trad-chinese-formal
-
- Example
- -moz-trad-chinese-informal
-
- Example
- urdu
- -moz-urdu
-
- Example
例
ol { list-style-type: upper-alpha; }
/* or use the shortcut "list-style": */
ol { list-style: upper-alpha; }
注記
- 一部の
list-style-typesの表示には、適切なフォントのインストールが必要です。 - CSS の仕様書には、
upper-alphaの指定時に、26 種類のアルファベットがマーカーとして使用された後に、何をマーカーとして用いるべきかが明示されていません。Firefox などのブラウザでは AA, AB, AC …としてこれを続けます。その他の順序つきのマーカーも同様です。 - リストスタイル
hebrew、cjk-ideographs、hiragana、katakana、hiragana-iroha、katakana-irohaは CSS2 で定義された後、CSS 2.1 で実装の不足を理由として削除されています。これらについては CSS3 Lists module での再定義が予想されます。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Lists and Counters Module Level 3 | 草案 | <文字列> のサポートを追加し、 @counter-style ルールで使われる識別子をキーワードに追加。この変更は現時点で実装しているブラウザがないため、このページにまだ反映していません。 |
| CSS Level 2 (Revision 1) | 勧告 | 初回定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman |
1.0 | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
lower-latin, upper-latin, lower-greek, armenian, georgian |
1.0 | 1.0 (1.0) | 8.0 | 6.0 | 1.0 (85) |
decimal-leading-zero |
1.0 | 1.0 (1.0) | 8.0 | 8.0 | 1.0 (85) |
hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha |
1.0 | 1.0 (1.0) | 未サポート | 7.0 （数値表示となる） | 1.0-1.2 (85-125) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? |
Internet Explorer 7 （及びそれ以下のバージョンの IE）では、lower-latin と upper-latin の代わりに lower-alpha と upper-alphaを用いる必要が有ります。
関連情報
list-style関連 CSS プロパティ:list-style、list-style-image、list-style-position