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