list-style-type
- 最終更新：2009年11月17日 00:04
list-style-typeプロパティは、リストマーカーの種類を指定します。
大別すると、グリフ（象形文字）、番号、アルファベットの3種類があり、これらは、list-style-typeプロパティの値がnoneになっているか、マーカー画像が表示出来ない場合に有効になります。
- 対応ブラウザ
-
プロパティの解説
- 値
- disc｜circle｜square｜decimal｜decimal-leading-zero｜lower-roman｜upper-roman｜lower-greek｜lower-alpha｜lower-latin｜upper-alpha｜upper-latin｜hebrew｜armenian｜georgian｜cjk-ideographic｜hiragana｜katakana｜hiragana-iroha｜katakana-iroha｜none｜inherit
- 初期値
- disc
- 適用される要素
-
li要素、
display: list-item;の要素 - 継承
- します
- パーセント値
- N/A
- メディア
- visual
値の解説（グリフ）
- disc
- 多くのUA（ブラウザとか）で黒丸になります。
- circle
- 多くのUAで白丸になります。
- square
- 多くのUAで黒四角になります。
グリフの形状に関しては厳密に定められていないため、UA依存になります。
値の解説（番号）
- decimal
- 数字
- decimal-leading-zero
-
上位の桁に0を付けた数字
(01, 02, 03, ..., 98, 99) - lower-roman
- 小文字のローマ数字
- upper-roman
- 大文字のローマ数字
- hebrew
- 伝統的なヘブライ数字
- armenian
- 伝統的なアルメニア数字
- georgian
- 伝統的なグルジア数字
- cjk-ideographic
- 漢数字
- hiragana
- 平仮名（あ、い、う、え、お）
- katakana
- 片仮名（ア、イ、ウ、エ、オ）
- hiragana-iroha
- 平仮名のいろは（い、ろ、は、に）
- katakana-iroha
- 片仮名のイロハ（イ、ロ、ハ、ニ）
指定した数字の種類を認識できないUAに関しては、decimalになります。
また、番号の各種類についてのルールが明確に定義されておらず、将来的に定義されるようです。
値の解説（アルファベット）
- lower-alpha
- 小文字のアルファベット
- lower-latin
- 小文字のラテン文字
- upper-alpha
- 大文字のアルファベット
- upper-latin
- 大文字のラテン文字
- lower-greek
- 小文字の古代ギリシャ文字
現時点の仕様では、アルファベットの終わりをどのように扱うかが定義されていません。
UA側でイイ感じに処理してくれるかもしれませんが、現状ではリストが長くなる場合は、番号を使う事が推奨されています。
CSS3で追加予定のマーカーの種類
CSS2.1の段階でもマーカーの種類が多々有りますが、CSS3では良く分かんないくらい追加されているようです。
以下から、追加予定のマーカーの種類が確認できますので興味ある方はご覧ください。（英語ですけど、全く読めなくても追加される値は分かると思います）
list-style-typeのグリフサンプル
ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
- disc
- 多くのUA（ブラウザとか）で黒丸になります。
- list-style-typeのサンプル
- circle
- 多くのUAで白丸になります。
- list-style-typeのサンプル
- square
- 多くのUAで黒四角になります。
- list-style-typeのサンプル
list-style-typeの番号サンプル
ol.decimal {
list-style-type: decimal;
}
ol.decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
ol.lower-roman {
list-style-type: lower-roman;
}
ol.upper-roman {
list-style-type: upper-roman;
}
ol.hebrew {
list-style-type: hebrew;
}
ol.armenian {
list-style-type: armenian;
}
ol.georgian {
list-style-type: georgian;
}
ol.cjk-ideographic {
list-style-type: cjk-ideographic;
}
ol.hiragana {
list-style-type: hiragana;
}
ol.katakana {
list-style-type: katakana;
}
ol.hiragana-iroha {
list-style-type: hiragana-iroha;
}
ol.katakana-iroha {
list-style-type: katakana-iroha;
}
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
- decimal
- 数字
- list-style-typeのサンプル
- decimal-leading-zero
- 上位の桁に0を付けた数字
- list-style-typeのサンプル
- lower-roman
- 小文字のローマ数字
- list-style-typeのサンプル
- upper-roman
- 大文字のローマ数字
- list-style-typeのサンプル
- hebrew
- 伝統的なヘブライ数字
- list-style-typeのサンプル
- armenian
- 伝統的なアルメニア数字
- list-style-typeのサンプル
- georgian
- 伝統的なグルジア数字
- list-style-typeのサンプル
- cjk-ideographic
- 漢数字
- list-style-typeのサンプル
- hiragana
- 平仮名
- list-style-typeのサンプル
- katakana
- 片仮名
- list-style-typeのサンプル
- hiragana-iroha
- 平仮名のいろは
- list-style-typeのサンプル
- katakana-iroha
- 片仮名のイロハ
- list-style-typeのサンプル
list-style-typeのアルファベットサンプル
ol.lower-alpha {
list-style-type: lower-alpha;
}
ol.lower-latin {
list-style-type: lower-latin;
}
ol.upper-alpha {
list-style-type: upper-alpha;
}
ol.upper-latin {
list-style-type: upper-latin;
}
ol.lower-greek {
list-style-type: lower-greek;
}
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
- lower-alpha
- 小文字のアルファベット
- list-style-typeのサンプル
- lower-latin
- 小文字のラテン文字
- list-style-typeのサンプル
- upper-alpha
- 大文字のアルファベット
- list-style-typeのサンプル
- upper-latin
- 大文字のラテン文字
- list-style-typeのサンプル
- lower-greek
- 小文字の古代ギリシャ文字
- list-style-typeのサンプル
