“list-style-type”プロパティ:リスト・マーカーの種類

概要

“list-style-type”プロパティはリスト・アイテムに付与されるリスト・マーカーとして使用される文字を指定します。

“list-style-type”プロパティで指定されたリスト・マーカーは“content”プロパティの値が“normal”であり、“list-style-image”プロパティによって指定された画像によるリスト・マーカーがない場合に有効になります。

サンプルコード

値

値	説明
	文字の種類	例
“<counter-style>”値
disc	ビュレット(“•”、U+2022)、もしくは類似した黒丸	“•”,“•”,“•”,“•”,...
circle	白ビュレット(“◦”、U+25E6)、もしくは類似した白丸	“◦”,“◦”,“◦”,“◦”,...
square	小さな黒四角(“▪”、U+25AA)、もしくは類似した黒四角	“▪”,“▪”,“▪”,“▪”,...
decimal	10進数の数字	“1”,“2”,“3”,“4”,...
decimal-leading-zero	ゼロ埋めした10進数の数字	“01”,“02”,“03”,“04”,...
lower-roman	小文字のASCIIローマ数字	“i”,“ii”,“iii”,“iv”,...
upper-roman	大文字のASCIIローマ数字	“I”,“II”,“III”,“IV”,...
lower-greek	小文字のギリシャ文字	“α”,“β”,“γ”,“δ”,...
lower-latin	小文字のラテン文字	“a”,“b”,“c”,“d”,...
upper-latin	大文字のラテン文字	“A”,“B”,“C”,“D”,...
armenian	大文字のアルメニア文字	“Ա”,“Բ”,“Գ”,“Դ”,...
georgian	グルジア文字	“ა”,“ბ”,“გ”,“დ”,...
lower-alpha	小文字のASCII文字	“a”,“b”,“c”,“d”,...
upper-alpha	大文字のASCII文字	“A”,“B”,“C”,“D”,...
<counter-style>	リスト・マーカーを指定された“<counter-style>”値で定義されたカウンター・スタイルで表します (定義済みのカウンター・スタイル、もしくは“@counter-style”ルールや“symbols()”関数で独自に定義したカウンター・スタイルを使用します。指定された“<counter-style>”値が存在しない場合は“decimal”とみなします。)
他の値
<string>	指定された文字列(“<string>”値)をリスト・マーカーとして使用します
none	リスト・マーカーを表示しません
共通キーワード

CSS3の仕様書では“none”以外のすべてのキーワード値が“@counter-style”ルールを使用して再定義されていますが、既存のキーワード値もユーザー・エージェントが既定で実装するべき定義済みのカウンター・スタイルとして仕様書に記載されており、今まで通り値として使用することができます。

仕様書

定義されている仕様書

list-style-type

<counter-style>
<string>
none

disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha

定義済みのリスト・マーカーを使用する

ol { list-style-type: disc;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: circle;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: square;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: decimal;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: decimal-leading-zero;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: lower-roman;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: upper-roman;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: lower-greek;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: lower-latin;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: upper-latin;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: armenian;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: georgian;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: lower-alpha;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

ol { list-style-type: upper-alpha;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

独自に定義したカウンター・スタイルを使用する

ol { list-style-type: sample-counter;}

@counter-style sample-counter {

system: numeric;
symbols: "\1D7D8" "\1D7D9" "\1D7DA" "\1D7DB" "\1D7DC" "\1D7DD" "\1D7DE" "\1D7DF" "\1D7E0" "\1D7E1";
suffix: "\003A\0020";

}

1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

特定の文字をリスト・マーカーとして使用する

ol { list-style-type: "\2615";}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所

リスト・マーカーを表示しない

ol { list-style-type: none;}


1. 東京スカイツリー
2. 対馬オメガ局送信用鉄塔
3. 硫黄島ロランC主局（初代）
4. 硫黄島ロランC主局（2代）
5. 南鳥島ロランC局（初代）
6. 東京タワー
7. NHK川口送信局
8. あべのハルカス
9. 明石海峡大橋
10. 横浜ランドマークタワー
11. 虎ノ門ヒルズ森タワー
12. りんくうゲートタワービル
13. 大阪府咲洲庁舎
14. おおたかどや山標準電波送信所
15. 依佐美送信所