list-style-typeプロパティは、リストアイテムのマーカーの種類を指定するためのプロパティです。
| スタイル名 | 説明 |
|---|---|
| none | リストマーカーを非表示 |
| disc | 塗りつぶされた円形(●) |
| circle | 白抜きの円形(○) |
| square | 塗りつぶされた四角(■) |
| decimal | 10進数(1,2,3…) |
| decimal-leading-zero | 0詰めされた10進数(01,02,03…) |
| lower-roman | 小文字によるローマ数字(ⅰ,ⅱ,ⅲ…) |
| upper-roman | 大文字によるローマ数字(Ⅰ,Ⅱ,Ⅲ…) |
| lower-alpha | 小文字によるアルファベット(a,b,c…) |
| upper-alpha | 大文字によるアルファベット(A,B,C…) |
| lower-latin | 小文字によるアルファベット(a,b,c…) |
| upper-latin | 大文字によるアルファベット(A,B,C…) |
| cjk-decimal | 漢数字(一,二,三…) |
| cjk-earthly-branch | 漢字による十二支(子,丑,寅…) |
| cjk-heavenly-stem | 漢字による十干(甲,乙,丙…) |
list-style-typeプロパティ
記法
.クラス名 {
list-style-type : スタイル;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>list-style-typeプロパティ</title>
</head>
<body>
<p>スタイル(none)</p>
<ul class="list-style-type-none">
<li>test</li>
</ul>
<hr />
<p>スタイル(disc)</p>
<ul class="list-style-type-disc">
<li>test</li>
</ul>
<hr />
<p>スタイル(circle)</p>
<ul class="list-style-type-circle">
<li>test</li>
</ul>
<hr />
<p>スタイル(square)</p>
<ul class="list-style-type-square">
<li>test</li>
</ul>
<hr />
<p>スタイル(decimal)</p>
<ul class="list-style-type-decimal">
<li>test</li>
</ul>
<hr />
<p>スタイル(decimal-leading-zero)</p>
<ul class="list-style-type-decimal-leading-zero">
<li>test</li>
</ul>
<hr />
<p>スタイル(lower-roman)</p>
<ul class="list-style-type-lower-roman">
<li>test</li>
</ul>
<hr />
<p>スタイル(upper-roman)</p>
<ul class="list-style-type-upper-roman">
<li>test</li>
</ul>
<hr />
<p>スタイル(lower-alpha)</p>
<ul class="list-style-type-lower-alpha">
<li>test</li>
</ul>
<hr />
<p>スタイル(upper-alpha)</p>
<ul class="list-style-type-upper-alpha">
<li>test</li>
</ul>
<hr />
<p>スタイル(lower-latin)</p>
<ul class="list-style-type-lower-latin">
<li>test</li>
</ul>
<hr />
<p>スタイル(upper-latin)</p>
<ul class="list-style-type-upper-latin">
<li>test</li>
</ul>
<hr />
<p>スタイル(cjk-decimal)</p>
<ul class="list-style-type-cjk-decimal">
<li>test</li>
</ul>
<hr />
<p>スタイル(cjk-earthly-branch)</p>
<ul class="list-style-type-cjk-earthly-branch">
<li>test</li>
</ul>
<hr />
<p>スタイル(cjk-heavenly-stem)</p>
<ul class="list-style-type-cjk-heavenly-stem">
<li>test</li>
</ul>
</body>
</html>.list-style-type-none {
list-style-type: none;
}
.list-style-type-disc {
list-style-type: disc;
}
.list-style-type-circle {
list-style-type: circle;
}
.list-style-type-square {
list-style-type: square;
}
.list-style-type-decimal {
list-style-type: decimal;
}
.list-style-type-decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
.list-style-type-lower-roman {
list-style-type: lower-roman;
}
.list-style-type-upper-roman {
list-style-type: upper-roman;
}
.list-style-type-lower-alpha {
list-style-type: lower-alpha;
}
.list-style-type-upper-alpha {
list-style-type: upper-alpha;
}
.list-style-type-lower-latin {
list-style-type: lower-latin;
}
.list-style-type-upper-latin {
list-style-type: upper-latin;
}
.list-style-type-cjk-decimal {
list-style-type: cjk-decimal;
}
.list-style-type-cjk-earthly-branch {
list-style-type: cjk-earthly-branch;
}
.list-style-type-cjk-heavenly-stem {
list-style-type: cjk-heavenly-stem;
}出力結果
スタイル(none)
- test
スタイル(disc)
- test
スタイル(circle)
- test
スタイル(square)
- test
スタイル(decimal)
- test
スタイル(decimal-leading-zero)
- test
スタイル(lower-roman)
- test
スタイル(upper-roman)
- test
スタイル(lower-alpha)
- test
スタイル(upper-alpha)
- test
スタイル(lower-latin)
- test
スタイル(upper-latin)
- test
スタイル(cjk-decimal)
- test
スタイル(cjk-earthly-branch)
- test
スタイル(cjk-heavenly-stem)
- test