【CSSリファレンス】list-style-type

こんにちは（・∀・）

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはlist-style-typeです。

概要

list-style-typeプロパティを使用してマーカー文字の種類を指定します。

.sample {
  list-style-type: disc;
}

適用要素

li要素、ul要素、ol要素、displayプロパティ(値がlist-itemの場合)

指定できる値

次の値はCSS2.1では削除されています

初期値

disc

サンプル

HTML

<ul class="d1">
<li>none</li>
<li>非表示</li>
</ul>
<ul class="d2">
<li>disc</li>
<li>黒丸</li>
</ul>
<ul class="d3">
<li>circle</li>
<li>白丸</li>
</ul>
<ul class="d4">
<li>square</li>
<li>四角</li>
</ul>
<ul class="d5">
<li>decimal</li>
<li>数字</li>
</ul>
<ul class="d6">
<li>decimal-leading-zero</li>
<li>頭に0付の数字</li>
</ul>
<ul class="d7">
<li>upper-alpha</li>
<li>大文字アルファベット</li>
</ul>
<ul class="d8">
<li>lower-alpha</li>
<li>小文字アルファベット</li>
</ul>
<ul class="d9">
<li>upper-roman</li>
<li>大文字ローマ数字</li>
</ul>
<ul class="d10">
<li>lower-roman</li>
<li>小文字ローマ数字</li>
</ul>
<ul class="d11">
<li>lower-greek</li>
<li>小文字ギリシャ文字</li>
</ul>
<ul class="d12">
<li>armenian</li>
<li>アルメニア数字</li>
</ul>
<ul class="d13">
<li>georgian</li>
<li>グルジア数字</li>
</ul>

CSS

.css-demo ul.d1 li {
  list-style-type: none;
}
.css-demo ul.d2 li {
  list-style-type: disc;
}
.css-demo ul.d3 li {
  list-style-type: circle;
}
.css-demo ul.d4 li {
  list-style-type: square;
}
.css-demo ul.d5 li {
  list-style-type: decimal;
}
.css-demo ul.d6 li {
  list-style-type: decimal-leading-zero;
}
.css-demo ul.d7 li {
  list-style-type: upper-alpha;
}
.css-demo ul.d8 li {
  list-style-type: lower-alpha;
}
.css-demo ul.d9 li {
  list-style-type: upper-roman;
}
.css-demo ul.d10 li {
  list-style-type: lower-roman;
}
.css-demo ul.d11 li {
  list-style-type: lower-greek;
}
.css-demo ul.d12 li {
  list-style-type: armenian;
}
.css-demo ul.d13 li {
  list-style-type: georgian;
}

Result