【CSSリファレンス】list-style-type
こんにちは(・∀・)
CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはlist-style-typeです。
概要
list-style-typeプロパティを使用してマーカー文字の種類を指定します。
.sample {
list-style-type: disc;
}
適用要素
li要素、ul要素、ol要素、displayプロパティ(値がlist-itemの場合)
指定できる値
値 | 解説 |
---|---|
none | 非表示 |
disc | 黒丸 |
circle | 白丸 |
square | 四角 |
decimal | 数字 |
decimal-leading-zero | 頭に0付の数字 |
upper-alpha | 大文字アルファベット |
lower-alpha | 小文字アルファベット |
upper-roman | 大文字ローマ数字 |
lower-romanr | 小文字ローマ数字 |
lower-greek | 小文字ギリシャ文字 |
armenian | アルメニア数字 |
georgian | グルジア数字 |
次の値はCSS2.1では削除されています
値 | 解説 |
---|---|
cjk-ideographic | 漢数字 |
hiragana | あいうえお(ひらがな) |
katakana | アイウエオ(カタカナ) |
hiragana-iroha | いろは(ひらがな) |
katakana-iroha | イロハ(カタカナ) |
hebrew | ヘブライ数字 |
初期値
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
- none
- 非表示
- disc
- 黒丸
- circle
- 白丸
- square
- 四角
- decimal
- 数字
- decimal-leading-zero
- 頭に0付の数字
- upper-alpha
- 大文字アルファベット
- lower-alpha
- 小文字アルファベット
- upper-roman
- 大文字ローマ数字
- lower-roman
- 小文字ローマ数字
- lower-greek
- 小文字ギリシャ文字
- armenian
- アルメニア数字
- georgian
- グルジア数字