mozilla

list-style-type

概要

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 …としてこれを続けます。その他の順序つきのマーカーも同様です。
  • リストスタイル hebrewcjk-ideographshiraganakatakanahiragana-irohakatakana-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-latinupper-latin の代わりに lower-alphaupper-alphaを用いる必要が有ります。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す