項 目 | 説 明 |
---|---|
記述形式 | セレクタ {list-style: 値 } |
値 の形式 | list-style-type list-style-image list-style-position |
初 期 値 | 各プロパティの初期値 |
対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | <ul>, <ol>, <li> などのリストアイテム要素 (display プロパティの値が list-item である要素) |
継 承 | する |
list-styleプロパティ は,リスト・マーカーに関する一括指定 をします。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
list-style-type | リスト・マーカーの種類を指定します。 予め定義されているものの中から選んでキーワードで指定したり,@counter-styleアットルール により独自の形式のものを指定することが可能です。 @counter-styleアットルール で,予め定義されているものは,下表を参照。 |
list-style-image | 画像をマーカーとして使用する場合に,画像ファイルの URL を指定します。 |
list-style-position | マーカーを表示する位置を指定します。 |
なお,'list-style-type と list-style-image の両方の値がある場合は, list-style-image の値が適用されます。
各プロパティの詳細については,それぞれの解説ページを参照してください。
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 | "0 1 2 3 4 5 6 7 8 9"
|
|
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 | "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"
|
|
fullwidth-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"
|
|
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 | "⒜ ⒝ ⒞ ⒟ ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯ ⒰ ⒱ ⒲ ⒳ ⒴ ⒵"
|
|
parenthesized-hangul-consonants | "㈀ ㈁ ㈂ ㈃ ㈄ ㈅ ㈆ ㈇ ㈈ ㈉ ㈊ ㈋ ㈌ ㈍"
|
|
parenthesized-hangul-syllable | "㈎ ㈏ ㈐ ㈑ ㈒ ㈓ ㈔ ㈕ ㈖ ㈗ ㈘ ㈙ ㈚"
|
|
その他 | 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-hangul-formal,korean-hanja-informal,korean-hanja-formal,greek
|
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css"> <!-- div.sample { width: 20em; margin: 10px; padding: 5px; border: 2px solid #8c8c8c ; } .ul1a { list-style: outside circle; } .ul1b { list-style: inside circle; } .ul2a { list-style: outside circle url(star.png); } .ul2b { list-style: inside circle url(star.png); } .ol1a { list-style: outside decimal; } .ol1b { list-style: inside decimal; } .ol2a { list-style: outside lower-alpha; } .ol2b { list-style: inside lower-alpha; } --> </style> |
HTML <body> ~ </body> |
<div class="sample"> <ul class="ul1a"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> <div class="sample"> <ul class="ul1b"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> <div class="sample"> <ul class="ul2a"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> <div class="sample"> <ul class="ul2b"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> <div class="sample"> <ul class="ol1a"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> <div class="sample"> <ul class="ol1b"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> <div class="sample"> <ul class="ol2a"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> <div class="sample"> <ul class="ol2b"> <li>項目1の1行目<br>項目1の2行目</li> <li>項目2の1行目<br>項目2の2行目</li> </ul> </div> |
ブラウザー 表示例 |
---|
↑ {list-style: outside circle;} の表示
↑ {list-style: inside circle;} の表示
↑ {list-style: outside circle url(star.png);} の表示
↑ {list-style: inside circle url(star.png);} の表示
↑ {list-style: outside decimal;} の表示
↑ {list-style: inside decimal;} の表示
↑ {list-style: outside lower-alpha;} の表示
↑ {list-style: inside lower-alpha;} の表示 |