ネストレベルごとにマーカーを変更する場合の記述はこちらの記事を参照してください。
ul{
list-style-type: (スタイル値);
}
ol{
list-style-type: (スタイル値);
}
<ul style="list-style-type: (スタイル値);">
...
</ul>
<ol style="list-style-type: (スタイル値);">
...
</ol>
| 値 | 意味 |
|---|---|
| disc | 黒丸 |
| circle | 白丸 |
| square | 四角形 |
| decimal | 数値 |
| decimal-leading-zero | 先頭の桁が0の数値 |
| lower-roman | 小文字のローマ数字 |
| upper-roman | 大文字のローマ数字 |
| lower-greek | 小文字のギリシア文字 |
| lower-latin | 小文字のラテン文字 |
| upper-latin | 大文字のラテン文字 |
| armenian | アルメニア文字 |
| georgian | グルジア文字 |
| lower-alpha | 小文字のアルファベット |
| upper-alpha | 大文字のアルファベット |
| none | なし |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>リストのデモです</div>
<ul style="list-style-type:circle;">
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
<li>項目D</li>
<li>項目E</li>
<li>項目F</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ListCustomize.css" />
</head>
<body>
<h1>リストのデモです</h1>
<ol>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
<li>項目D</li>
<li>項目E</li>
<li>項目F</li>
</ol>
</body>
</html>
ol {
list-style-type:lower-greek;
}
ilst-style-type プロパティを記述し、lower-greek を
設定しています。小文字のギリシア文字でリスト項目を表示します。ol {
list-style-type:lower-greek;
}
::marker 疑似要素を利用してマーカーを変更する方法もあります。ul li::marker{
content: (設定するマーカー);
}
ol li::marker{
content: (設定するマーカー);
}
ul li {
list-style-type:none;
}
ul li::marker {
content: "＊";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ListMarkerPseudoElement.css"/>
</head>
<body>
<h1>リストのデモ ::marker 疑似要素</h1>
<ul>
<li>C# Document</li>
<li>Python Document</li>
<li>JavaScript Document</li>
<li>C++ Document</li>
<li>Visual Basic Document</li>
</ul>
</body>
</html>
list-style-type プロパティに none を指定しデフォルトのマーカーが表示されない動作にします。ul li {
list-style-type:none;
}
::maker疑似要素を指定し、content プロパティに "＊" を指定します。マーカー部分に ＊ が表示されます。 ul li::marker {
content: "＊";
}
