【list-style-type】リストのマークや番号の種類を指定

list-style-typeプロパティでは、リスト項目の先頭に表示されるマーク(マーカー)や番号の種類を指定できます。

またlist-style-typeプロパティとlist-style-imageプロパティを同時に指定した場合は、list-style-imageで指定している画像が優先して表示されます。 ただしlist-style-imageで指定した画像が表示できない場合、または値に「none」を指定している場合は、list-style-typeの値が適用されるようになります。

なおlist-style-typeはli要素(リスト項目)のマークを設定するプロパティですので、基本的には「display:list-item」が指定されている要素、またはli要素にのみ適用できます。

※ul・olなどにも適用できます

hebrew(ヘブライ数字)、cjk-ideographic(漢数字)、hiragana(ひらがな)、katakana(カタカナ)、hiragana-iroha(ひらがなのいろは)、katakana-iroha(カタカナのイロハ)は、css2では定義されていましたが、css2.1では削除されましたので注意して下さい。

またInternet Explorer7では、decimal-leading-zero、lower-greek、lower-latin、upper-latin、armenian、georgianには対応していません。

書式

  • list-style-type : ……… リストのマークや番号の種類を指定

★:disc、circle、square、inherit、他下記値参照

none
マーク(マーカー)を表示しない
disc
塗りつぶされた黒丸(●)
circle
線で描かれた白丸(○)
square
四角(■)
lower-roman
ローマ数字の小文字(i, ii, iii…)
upper-roman
ローマ数字の大文字(I, II, III…)
lower-greek
ギリシャ数字の小文字(α, γ, β…)
decimal
算用数字(1, 2, 3…)
decimal-leading-zero
頭に0を付けた算用数字(01, 02, 03…)
lower-latin、lower-alpha
アルファベットの小文字(a, b, c…)
upper-latin、upper-alpha
アルファベットの大文字(A, B, C…)
armenian
アルメニア数字(Ա, Բ, Գ…)
georgian
グルジア数字(ა, ბ, გ…)
hebrew
ヘブライ数字(א, ב, ג…)
cjk-ideographic
漢数字(一, 二, 三…)
hiragana
あいうえお順(あ, い, う…)
katakana
アイウエオ順(ア, イ, ウ…)
hiragana-iroha
いろはにほへと順(い, ろ, は…)
katakana-iroha
イロハニホヘト順(イ, ロ, ハ…)

使用した時の例

.sample1 {list-style-type: none}
.sample2 {list-style-type: disc}
.sample3 {list-style-type: circle}
.sample4 {list-style-type: square}
.sample5 {list-style-type: lower-roman}
.sample6 {list-style-type: upper-roman}
.sample7 {list-style-type: lower-greek}
.sample8 {list-style-type: decimal}
.sample9 {list-style-type: decimal-leading-zero}
.sample10 {list-style-type: lower-latin}
.sample11 {list-style-type: lower-alpha}
.sample12 {list-style-type: upper-latin}
.sample13 {list-style-type: upper-alpha}
.sample14 {list-style-type: armenian}
.sample15 {list-style-type: georgian}
.sample16 {list-style-type: hebrew}
.sample17 {list-style-type: cjk-ideographic}
.sample18 {list-style-type: hiragana}
.sample19 {list-style-type: katakana}
.sample20 {list-style-type: hiragana-iroha}
.sample21 {list-style-type: katakana-iroha}
<ul class="sample1">
  <li>マークなし(none)</li>
  <li>マークなし(none)</li>
  <li>マークなし(none)</li>
</ul>

<ul class="sample2">
  <li>黒丸(disc)</li>
  <li>黒丸(disc)</li>
  <li>黒丸(disc)</li>
</ul>

<ul class="sample3">
  <li>白丸(circle)</li>
  <li>白丸(circle)</li>
  <li>白丸(circle)</li>
</ul>

<ul class="sample4">
  <li>四角(square)</li>
  <li>四角(square)</li>
  <li>四角(square)</li>
</ul>

<ol class="sample5">
  <li>ローマ数字の小文字(lower-roman)</li>
  <li>ローマ数字の小文字(lower-roman)</li>
  <li>ローマ数字の小文字(lower-roman)</li>
</ol>

<ol class="sample6">
  <li>ローマ数字の大文字(upper-roman)</li>
  <li>ローマ数字の大文字(upper-roman)</li>
  <li>ローマ数字の大文字(upper-roman)</li>
</ol>

<ol class="sample7">
  <li>ギリシア数字の小文字(lower-greek)</li>
  <li>ギリシア数字の小文字(lower-greek)</li>
  <li>ギリシア数字の小文字(lower-greek)</li>
</ol>

<ol class="sample8">
  <li>算用数字(decimal)</li>
  <li>算用数字(decimal)</li>
  <li>算用数字(decimal)</li>
</ol>

<ol class="sample9">
  <li>0を付けた算用数字(decimal-leading-zero)</li>
  <li>0を付けた算用数字(decimal-leading-zero)</li>
  <li>0を付けた算用数字(decimal-leading-zero)</li>
</ol>

<ol class="sample10">
  <li>アルファベットの小文字(lower-latin)</li>
  <li>アルファベットの小文字(lower-latin)</li>
  <li>アルファベットの小文字(lower-latin)</li>
</ol>

<ol class="sample11">
  <li>アルファベットの小文字(lower-alpha)</li>
  <li>アルファベットの小文字(lower-alpha)</li>
  <li>アルファベットの小文字(lower-alpha)</li>
</ol>

<ol class="sample12">
  <li>アルファベットの大文字(upper-latin)</li>
  <li>アルファベットの大文字(upper-latin)</li>
  <li>アルファベットの大文字(upper-latin)</li>
</ol>

<ol class="sample13">
  <li>アルファベットの大文字(upper-alpha)</li>
  <li>アルファベットの大文字(upper-alpha)</li>
  <li>アルファベットの大文字(upper-alpha)</li>
</ol>

<ol class="sample14">
  <li>アルメニア数字(armenian)</li>
  <li>アルメニア数字(armenian)</li>
  <li>アルメニア数字(armenian)</li>
</ol>

<ol class="sample15">
  <li>グルジア数字(georgian)</li>
  <li>グルジア数字(georgian)</li>
  <li>グルジア数字(georgian)</li>
</ol>

<ol class="sample16">
  <li>ヘブライ数字(hebrew)</li>
  <li>ヘブライ数字(hebrew)</li>
  <li>ヘブライ数字(hebrew)</li>
</ol>

<ol class="sample17">
  <li>漢数字(cjk-ideographic)</li>
  <li>漢数字(cjk-ideographic)</li>
  <li>漢数字(cjk-ideographic)</li>
</ol>

<ol class="sample18">
  <li>あいうえお順(hiragana)</li>
  <li>あいうえお順(hiragana)</li>
  <li>あいうえお順(hiragana)</li>
</ol>

<ol class="sample19">
  <li>アイウエオ順(katakana)</li>
  <li>アイウエオ順(katakana)</li>
  <li>アイウエオ順(katakana)</li>
</ol>

<ul class="sample20">
  <li>いろはにほへと順(hiragana-iroha)</li>
  <li>いろはにほへと順(hiragana-iroha)</li>
  <li>いろはにほへと順(hiragana-iroha)</li>
</ul>

<ul class="sample21">
  <li>イロハニホヘト順(katakana-iroha)</li>
  <li>イロハニホヘト順(katakana-iroha)</li>
  <li>イロハニホヘト順(katakana-iroha)</li>
</ul>

ブラウザ上の表示例

  • マークなし(none)
  • マークなし(none)
  • マークなし(none)
  • 黒丸(disc)
  • 黒丸(disc)
  • 黒丸(disc)
  • 白丸(circle)
  • 白丸(circle)
  • 白丸(circle)
  • 四角(square)
  • 四角(square)
  • 四角(square)
  1. ローマ数字の小文字(lower-roman)
  2. ローマ数字の小文字(lower-roman)
  3. ローマ数字の小文字(lower-roman)
  1. ローマ数字の大文字(upper-roman)
  2. ローマ数字の大文字(upper-roman)
  3. ローマ数字の大文字(upper-roman)
  1. ギリシア数字の小文字(lower-greek)
  2. ギリシア数字の小文字(lower-greek)
  3. ギリシア数字の小文字(lower-greek)
  1. 算用数字(decimal)
  2. 算用数字(decimal)
  3. 算用数字(decimal)
  1. 0を付けた算用数字(decimal-leading-zero)
  2. 0を付けた算用数字(decimal-leading-zero)
  3. 0を付けた算用数字(decimal-leading-zero)
  1. アルファベットの小文字(lower-latin)
  2. アルファベットの小文字(lower-latin)
  3. アルファベットの小文字(lower-latin)
  1. アルファベットの小文字(lower-alpha)
  2. アルファベットの小文字(lower-alpha)
  3. アルファベットの小文字(lower-alpha)
  1. アルファベットの大文字(upper-latin)
  2. アルファベットの大文字(upper-latin)
  3. アルファベットの大文字(upper-latin)
  1. アルファベットの大文字(upper-alpha)
  2. アルファベットの大文字(upper-alpha)
  3. アルファベットの大文字(upper-alpha)
  1. アルメニア数字(armenian)
  2. アルメニア数字(armenian)
  3. アルメニア数字(armenian)
  1. グルジア数字(georgian)
  2. グルジア数字(georgian)
  3. グルジア数字(georgian)
  1. ヘブライ数字(hebrew)
  2. ヘブライ数字(hebrew)
  3. ヘブライ数字(hebrew)
  1. 漢数字(cjk-ideographic)
  2. 漢数字(cjk-ideographic)
  3. 漢数字(cjk-ideographic)
  1. あいうえお順(hiragana)
  2. あいうえお順(hiragana)
  3. あいうえお順(hiragana)
  1. アイウエオ順(katakana)
  2. アイウエオ順(katakana)
  3. アイウエオ順(katakana)
  • いろはにほへと順(hiragana-iroha)
  • いろはにほへと順(hiragana-iroha)
  • いろはにほへと順(hiragana-iroha)
  • イロハニホヘト順(katakana-iroha)
  • イロハニホヘト順(katakana-iroha)
  • イロハニホヘト順(katakana-iroha)

※数字の番号順、文字順になっている値でも、olだけでなくulに対してでも設定できます(ulに対し設定した場合でも、番号順、文字順で表示されます)

対応ブラウザなどのデータ

初期値 disc 値の継承 継承する
適用可能な要素 li,「display:list-item」が指定されてる要素(ul,olに対し指定した場合は、内容のliに継承)
メディア visual / list
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報