ネストレベルごとにマーカーを変更する場合の記述はこちらの記事を参照してください。
ULタグやOLタグ内の項目の先頭に表示される記号、マークや数値の表現を変更するコードと表示結果を紹介します。
HTMLのULタグやOLタグ内のLIタグでリストの項目を表現できます。
Webブラウザで表示した際には、ULタグであれば、項目の先頭には「・」の記号が表示されます。
OLタグの場合は、アラビア数字で1から順番に数値が付加されます。
項目の内容や用途によっては、先頭の記号や数値の表現を変えたい場合があります。
この記事では、ULタグ、OLタグ内の項目のマークを変更するコードを紹介します。
UL,OLタグの項目のマークを変更するには、スタイル指定で "list-style-type" プロパティを利用します。
以下の書式となります。
ul{
list-style-type: (スタイル値);
}
ol{
list-style-type: (スタイル値);
}
<ul style="list-style-type: (スタイル値);">
...
</ul>
<ol style="list-style-type: (スタイル値);">
...
</ol>
list-styleプロパティは以下の値を指定可能です。
| 値 | 意味 |
|---|---|
| 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 | なし |
以下のHTMLファイルを作成します。
<!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>
上記のHTMLファイルをWebブラウザで表示すると、下図の画面が表示されます。デフォルトの設定では、各項目の先頭に黒丸が表示されますが、"list-style-type:circle" を指定することにより、白丸が項目の先頭に表示される動作となります。
以下のコードを記述します。
<!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;
}
スタイルシートで ol タグのスタイルを設定しています。ilst-style-type プロパティを記述し、lower-greek を
設定しています。小文字のギリシア文字でリスト項目を表示します。
ol {
list-style-type:lower-greek;
}
上記のHTMLファイルをWebブラウザで表示します。リストの項目が、小文字のギリシア文字で表示されます。
::marker 疑似要素を利用してマーカーを変更する方法もあります。
以下の書式となります。
ul li::marker{
content: (設定するマーカー);
}
ol li::marker{
content: (設定するマーカー);
}
以下のHTML、CSSファイルを作成します。
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: "＊";
}
上記のHTMLをWebブラウザで表示します。マーカーが"＊"で表示されていることが確認できます。
