list-style-type: ***;
list-style-type は、リストマーカーの種類を指定するプロパティです。
このプロパティは、ul要素、ol要素、li要素の他、displayプロパティで list-item を指定した要素に設定することができます。
ul {
list-style-type: square;
}
ol {
list-style-type: upper-alpha;
}
【マーカーの種類】
list-style-type: ***
(***
の部分に以下の値を指定します)
プロパティ名 | 値 | 説明 | 表示例 |
---|---|---|---|
list-style-type [CSS 1] |
none | マーカーを表示しない |
|
disc | 黒丸 |
|
|
circle | 白丸 |
|
|
square | 四角 |
|
|
decimal | 数字 |
|
|
upper-alpha | 大文字アルファベット |
|
|
lower-alpha | 小文字アルファベット |
|
|
upper-roman | 大文字ローマ数字 |
|
|
lower-roman | 小文字ローマ数字 |
|
|
[CSS 2] | decimal-leading-zero | 2桁の数字 |
|
lower-greek | 小文字ギリシャ文字 |
|
|
upper-latin | 大文字ラテン文字 |
|
|
lower-latin | 小文字ラテン文字 |
|
|
hebrew | ヘブライ数字 |
|
|
armenian | アルメニア数字 |
|
|
georgian | グルジア数字 |
|
|
cjk-ideographic | 漢数字 |
|
|
hiragana | ひらがな |
|
|
katakana | カタカナ |
|
|
hiragana-iroha | いろは |
|
|
katakana-iroha | イロハ |
|
- [CSS 1]の9種類は多くのブラウザで対応していますが、[CSS 2]の12種類は一部のブラウザでしか対応していません。
- [CSS 2]の対応状況は、Firefox、Safari、Chromeは全てに対応、IE 8とOperaは一部に対応、IE 7以下は全て未対応となります。
マーカーの画像を同時に指定している場合は、画像の表示が優先されます。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
ul { list-style-type: square; }
ol { list-style-type: upper-alpha; }
</style>
</head>
<body>
<ul>
<li>リスト項目A</li>
<li>リスト項目B</li>
<li>リスト項目C</li>
</ul>
<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>
</body>
</html>
表示例
- リスト項目A
- リスト項目B
- リスト項目C
- リスト項目1
- リスト項目2
- リスト項目3
- サイト内検索