トップページの中の プロパティの中の Lのプロパティ一覧の中の list-style-type

list-style-type

  • 最終更新:2009年11月17日 00:04

list-style-typeプロパティは、リストマーカーの種類を指定します。
大別すると、グリフ(象形文字)、番号、アルファベットの3種類があり、これらは、list-style-typeプロパティの値がnoneになっているか、マーカー画像が表示出来ない場合に有効になります。

対応ブラウザ
  • IE6一部対応
  • IE7一部対応
  • IE8一部対応
  • Firefox3.5対応
  • Opera10一部対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

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;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
  1. decimal
  2. 数字
  3. list-style-typeのサンプル
  1. decimal-leading-zero
  2. 上位の桁に0を付けた数字
  3. list-style-typeのサンプル
  1. lower-roman
  2. 小文字のローマ数字
  3. list-style-typeのサンプル
  1. upper-roman
  2. 大文字のローマ数字
  3. list-style-typeのサンプル
  1. hebrew
  2. 伝統的なヘブライ数字
  3. list-style-typeのサンプル
  1. armenian
  2. 伝統的なアルメニア数字
  3. list-style-typeのサンプル
  1. georgian
  2. 伝統的なグルジア数字
  3. list-style-typeのサンプル
  1. cjk-ideographic
  2. 漢数字
  3. list-style-typeのサンプル
  1. hiragana
  2. 平仮名
  3. list-style-typeのサンプル
  1. katakana
  2. 片仮名
  3. list-style-typeのサンプル
  1. hiragana-iroha
  2. 平仮名のいろは
  3. list-style-typeのサンプル
  1. katakana-iroha
  2. 片仮名のイロハ
  3. 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;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
  1. lower-alpha
  2. 小文字のアルファベット
  3. list-style-typeのサンプル
  1. lower-latin
  2. 小文字のラテン文字
  3. list-style-typeのサンプル
  1. upper-alpha
  2. 大文字のアルファベット
  3. list-style-typeのサンプル
  1. upper-latin
  2. 大文字のラテン文字
  3. list-style-typeのサンプル
  1. lower-greek
  2. 小文字の古代ギリシャ文字
  3. list-style-typeのサンプル

このページの上部へ