list-style-type は、リストマーク（マーカー）の種類を指定するプロパティです。
ul 要素、ol 要素、li 要素の他、displayプロパティで list-item を指定した要素に適用できます。
※リストについての詳細は、リストタグのカテゴリーをご覧ください。
ul {
list-style-type: square;
}
ol {
list-style-type: upper-alpha;
}
【マークの種類】
list-style-type: *** （*** の部分に以下の値を指定します）
| 値 | 内容 | 表示例 |
▼
|
||
| none | マークなし |
|
|---|---|---|
| disc | 黒丸 |
|
| circle | 白丸 |
|
| square | 四角 |
|
| decimal | 数字 |
|
| upper-alpha | 大文字アルファベット |
|
| lower-alpha | 小文字アルファベット |
|
| upper-roman | 大文字ローマ数字 |
|
| lower-roman | 小文字ローマ数字 |
|
▼
※Operaでは一部のマーカーのみ対応
|
||
| decimal-leading-zero | 2桁の数字 |
|
| lower-greek | 小文字ギリシャ文字 |
|
| upper-latin | 大文字ラテン文字 |
|
| lower-latin | 小文字ラテン文字 |
|
| hebrew | ヘブライ数字 |
|
| armenian | アルメニア数字 |
|
| georgian | グルジア数字 |
|
| cjk-ideographic | 漢数字 |
|
| hiragana | ひらがな |
|
| katakana | カタカナ |
|
| hiragana-iroha | いろは |
|
| katakana-iroha | イロハ |
|
マーカーに画像が指定されている場合は、その画像の表示が優先されます。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
ul { list-style-type: square; }
ol { list-style-type: upper-alpha; }
-->
</style>
</head>
<body>
<ul>
<li>WebディレクターA</li>
<li>WebデザイナーA</li>
<li>WebプログラマーA</li>
</ul>
<ol>
<li>WebディレクターB</li>
<li>WebデザイナーB</li>
<li>WebプログラマーB</li>
</ol>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
