| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {list-style-type: 値 } |
| 値 の形式 | 文字列 | カウンタ・スタイル | inline | none |
| 初 期 値 | disc |
| 対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | <ul>, <ol>, <li> などのリストアイテム要素 （display プロパティの値が list-item である要素） |
| 継 承 | する |
list-style-typeプロパティ は，リスト・マーカー文字の種類 を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| 文字列 | ::marker 擬似要素 のコンテンツの既定値として，ここで指定した文字列を使用します。 |
| カウンタ・スタイル | ::marker 擬似要素 のコンテンツの既定値は，カウンタ形式に従って @counter-style アットルール により定義された リスト項目カウンタ（list-item counter） で指定します。 予め多数のカウンタ・スタイルが定義されていますので，これらの中からキーワードで指定することもできます。（下表参照） |
| inline | ::marker 擬似要素 のコンテンツの既定値は，リスト項目のインライン・マーカーとして使用できる最初の子要素の文字を使用します。 |
| none | ::marker 擬似要素 のコンテンツの既定値を持ちません。 この値を指定すると，::marker 擬似要素 のコンテンツが content プロパティで指定されている場合を除いて，マーカーの生成が行われません。 |
list-style-type プロパティ で指定するリスト・マーカー（カウンタ・スタイル）のうち，@counter-style アットルール で，予め定義されているものとしては， 以下のようなものがあります。
| 種 類 | キーワード | リスト・マーカー |
|---|---|---|
| 記 号 | box | "◽"
|
check | "✓"
|
|
circle | "◦"
|
|
diamond | "◆"
|
|
disc | "•"
|
|
dash | "—"
|
|
square | "◾"
|
|
| 数 字 | binary | "0， 1"
|
cjk-decimal | "〇 一 二 三 四 五 六 七 八 九"
|
|
decimal | "0 1 2 3 4 5 6 7 8 9"
|
|
fullwidth-decimal | "０ １ ２ ３ ４ ５ ６ ７ ８ ９"
|
|
lower-hexadecimal | "0 1 2 3 4 5 6 7 8 9 a b c d e f"
|
|
new-base-60 | "0 1 2 3 4 5 6 7 8 9 A B C D E F G H J K L M N P Q R S T U V W X Y Z _ a b c d e f g h i j k m n o p q r s t u v w x y z"
|
|
octal | "0 1 2 3 4 5 6 7"
|
|
super-decimal | "⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹"
|
|
upper-hexadecimal | "0 1 2 3 4 5 6 7 8 9 A B C D E F"
|
|
その他 | arabic-indic，bengali，burmese，cambodian，devanagari，eastern-nagari，gujarati，
gurmukhi，khmer，lao，lepcha，malayalam，marathi，mongolian，myanmar，oriya，persian，tamil，telugu，
tibetan，thai
|
|
| アルファベット | cjk-earthly-branch | "子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥"
|
cjk-heavenly-stem | "甲 乙 丙 丁 戊 己 庚 辛 壬 癸"
|
|
fullwidth-lower-alpha | "ａ ｂ ｃ ｄ ｅ ｆ ｇ ｈ ｉ ｊ ｋ ｌ ｍ ｎ ｏ ｐ ｑ ｒ ｓ ｔ ｕ ｖ ｗ ｘ ｙ ｚ"
|
|
fullwidth-upper-alpha | "Ａ Ｂ Ｃ Ｄ Ｅ Ｆ Ｇ Ｈ Ｉ Ｊ Ｋ Ｌ Ｍ Ｎ Ｏ Ｐ Ｑ Ｒ Ｓ Ｔ Ｕ Ｖ Ｗ Ｘ Ｙ Ｚ"
|
|
hiragana-iroha | "い ろ は に ほ へ と ち り ぬ る を わ か よ た れ そ つ ね な ら む う ゐ の お く や ま け ふ こ え て あ さ き ゆ め み し ゑ ひ も せ す ん"
|
|
hiragana | "あ い う え お か き く け こ さ し す せ そ た ち つ て と な に ぬ ね の は ひ ふ へ ほ ま み む め も や ゆ よ ら り る れ ろ わ を ん"
|
|
katakana-iroha | "イ ロ ハ ニ ホ ヘ ト チ リ ヌ ル ヲ ワ カ ヨ タ レ ソ ツ ネ ナ ラ ム ウ ヰ ノ オ ク ヤ マ ケ フ コ エ テ ア サ キ ユ メ ミ シ ヱ ヒ モ セ ス ン"
|
|
katakana | "ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン"
|
|
korean-consonant | "ㄱ ㄴ ㄷ ㄹ ㅁ ㅂ ㅅ ㅇ ㅈ ㅊ ㅋ ㅌ ㅍ ㅎ"
|
|
korean-syllable | "가 나 다 라 마 바 사 아 자 차 카 타 파 하"
|
|
lower-alpha | "a b c d e f g h i j k l m n o p q r s t u v w x y z"
|
|
lower-greek | "α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω"
|
|
upper-alpha | "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z"
|
|
その他 | afar，agaw，ari，blin，dizi，
gedeo，gumuz，hadiyya，harari，hindi，kaffa，kebena，kembata，konso，
kunama，lower-belorussian，lower-bulgarian，lower-macedonian，lower-oromo-qubee，lower-russian，
lower-russian-full，lower-serbo-croatian，lower-ukrainian，lower-ukrainian-full，meen，
oromo，saho，sidama，silti，thai-alphabetic，tigre，upper-belorussian，
upper-bulgarian，upper-macedonian，upper-oromo-qubee，upper-russian，upper-russian-full，
upper-serbo-croatian，upper-ukrainian，upper-ukrainian-full，wolaita，yemsa
|
|
| シンボル | asterisks | "*"
|
footnotes | "* ⁑ † ‡"
|
|
lower-alpha-symbolic | "a b c d e f g h i j k l m n o p q r s t u v w x y z"
|
|
upper-alpha-symbolic | "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z"
|
|
| 繰り返しなし | circled-decimal | "⓪ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳ ㉑ ㉒ ㉓ ㉔ ㉕ ㉖ ㉗ ㉘ ㉙ ㉚ ㉛ ㉜ ㉝ ㉞ ㉟ ㊱ ㊲ ㊳ ㊴ ㊵ ㊶ ㊷ ㊸ ㊹ ㊺ ㊻ ㊼ ㊽ ㊾ ㊿"
|
circled-lower-latin | "ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ"
|
|
circled-upper-latin | "Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ"
|
|
circled-korean-consonants | "㉠ ㉡ ㉢ ㉣ ㉤ ㉥ ㉦ ㉧ ㉨ ㉩ ㉪ ㉫ ㉬ ㉭"
|
|
circled-korean-syllables | "㉮ ㉯ ㉰ ㉱ ㉲ ㉳ ㉴ ㉵ ㉶ ㉷ ㉸ ㉹ ㉺ ㉻"
|
|
decimal-leading-zero | "-09 -08 -07 -06 -05 -04 -03 -02 -01 00 01 02 03 04 05 06 07 08 09"
|
|
dotted-decimal | "⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛"
|
|
double-circled-decimal | "⓵ ⓶ ⓷ ⓸ ⓹ ⓺ ⓻ ⓼ ⓽ ⓾"
|
|
filled-circled-decimal | "❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ⓫ ⓬ ⓭ ⓮ ⓯ ⓰ ⓱ ⓲ ⓳ ⓴"
|
|
fullwidth-upper-roman | "Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ"
|
|
fullwidth-lower-roman | "ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ"
|
|
parenthesized-decimal | "⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇"
|
|
parenthesized-lower-latin | "⒜ ⒝ ⒞ ⒟ ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯ ⒰ ⒱ ⒲ ⒳ ⒴ ⒵"
|
|
その他 | persian-abjad，persian-alphabetic
|
|
| 数字（追加） | simple-upper-roman | "1000 → M, 500 → D, 100 → C, 50 → L, 10 → X, 5 → V, 1 → I"
|
simple-lower-roman | "1000 → m, 500 → d, 100 → c, 50 → l, 10 → x, 5 → v, 1 → i"
|
|
upper-roman | "1000 → M, 900 → CM, 500 → D, 400 → CD, 100 → C, 90 → XC, 50 → L, 40 → XL, 10 → X, 9 → IX, 5 → V, 4 → IV, 1 → I"
|
|
lower-roman | "1000 → m, 900 → cm, 500 → d, 400 → cd, 100 → c, 90 → xc, 50 → l, 40 → xl, 10 → x, 9 → ix, 5 → v, 4 → iv, 1 → i"
|
|
japanese-informal | "9000 → 九阡, 8000 → 八阡, 7000 → 七阡, 6000 → 六阡, 5000 → 伍阡, 4000 → 四阡, 3000 → 参阡, 2000 → 弐阡, 1000 → 壱阡, 900 → 九百, 800 → 八百, 700 → 七百, 600 → 六百, 500 → 伍百, 400 → 四百, 300 → 参百, 200 → 弐百, 100 → 壱百, 90 → 九拾, 80 → 八拾, 70 → 七拾, 60 → 六拾, 50 → 伍拾, 40 → 四拾, 30 → 参拾, 20 → 弐拾, 10 → 壱拾, 9 → 九, 8 → 八, 7 → 七, 6 → 六, 5 → 伍, 4 → 四, 3 → 参, 2 → 弐, 1 → 壱, 0 → 零"
|
|
その他 | hebrew，lower-armenianlower-armenian，upper-armenian，armenian，georgian，ancient-tamil， korean-hanja-informal，korean-hanja-formal，greek
|
なお，content プロパティ と ::before 擬似要素 を使うと，より自由に リスト・マーカー文字 の設定を行うことが可能です。 CSS3解説 の 擬似要素 を参照してください。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {
width: 20em;
margin: 10px;
padding: 5px;
border: 2px solid #8c8c8c ;
}
.ulstty1 { list-style-type: circle; }
.ulstty2 { list-style-type: disc; }
.ulstty3 { list-style-type: square; }
.olstty1 { list-style-type: decimal; }
.olstty2 { list-style-type: lower-alpha; }
.olstty3 { list-style-type: lower-greek; }
.olstty4 { list-style-type: upper-alpha; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample"> <ul class="ulstty1"> <li>項目１の表示</li><li>項目２の表示</li><li>項目３の表示</li> </ul> </div> <div class="sample"> <ul class="ulstty2"> <li>項目１の表示</li><li>項目２の表示</li><li>項目３の表示</li> </ul> </div> <div class="sample"> <ul class="ulstty3"> <li>項目１の表示</li><li>項目２の表示</li><li>項目３の表示</li> </ul> </div> <div class="sample"> <ol class="olstty1"> <li>項目１の表示</li><li>項目２の表示</li><li>項目３の表示</li> </ol> </div> <div class="sample"> <ol class="olstty2"> <li>項目１の表示</li><li>項目２の表示</li><li>項目３の表示</li> </ol> </div> <div class="sample"> <ol class="olstty3"> <li>項目１の表示</li><li>項目２の表示</li><li>項目３の表示</li> </ol> </div> <div class="sample"> <ol class="olstty4"> <li>項目１の表示</li><li>項目２の表示</li><li>項目３の表示</li> </ol> </div> |
| ブラウザー 表示例 |
|---|
↑ {list-style-type: circle;} の表示
↑ {list-style-type: disc;} の表示
↑ {list-style-type: square;} の表示
↑ {list-style-type: decimal;} の表示
↑ {list-style-type: lower-alpha;} の表示
↑ {list-style-type: lower-greek;} の表示
↑ {list-style-type: upper-alpha;} の表示 |