Jan.22nd, 2022
CSSのカウンター・スタイル
““<counter-style>”値”とは？
“カウンター・スタイル(Counter Style)”はリスト・アイテムの順序を表すリスト・カウンターの値をリスト・マーカーとして使用する文字列にどのように変換するかを指定する規則です。例えば、リストの2番目のリスト・アイテムに付加するリスト・マーカーを“2”とするのか、それとも“ii”や“b”とするのかがカウンター・スタイルによって定められます。
カウンター・スタイルは“list-style-type”プロパティや“list-style”プロパティの値として指定できる“<counter-style>”値によってリスト・アイテムに関連付けられます。
CSS2まではカウンター・スタイルを指定するために“decimal”や“lower-roman”などのキーワード値が定義されていましたが、CSS3では“<counter-style>”値として拡張され、より詳細にカウンター・スタイルを指定することが可能になりました。
“<counter-style>”値には“@counter-style”ルールによって詳細に定義したカウンター・スタイルと関連付けるための“<counter-style-name>”値とより簡易的にカウンター・スタイルを定義可能な“symbols()”関数の2種類があります。
“<counter-style>”値の一覧
| 値 | 説明 |
|---|---|
| <counter-style-name> | “@counter-style”ルールによって定義されたカウンター・スタイルの名前 |
| symbols() | カウンター・スタイルを定義する |
“<counter-style-name>”値
“<counter-style-name>”値は“@counter-style”ルールで定義されたカウンター・スタイルの名前で、そのカウンター・スタイルを“list-style-type”プロパティや“list-style”プロパティなどと関連付けるために使用します。
“@counter-style”ルールを使用するとリスト・カウンターの値をどのような文字で表すのかやその法則性、リスト・マーカーの前後に付加する文字列、リスト・カウンターの値が負の値の場合に付加する記号などを詳細に定義することが可能です。
ol { list-style: sample-counter;}
@counter-style sample-counter {
system: numeric;
symbols: "\1D7D8" "\1D7D9" "\1D7DA" "\1D7DB" "\1D7DC" "\1D7DD" "\1D7DE" "\1D7DF" "\1D7E0" "\1D7E1";
suffix: "\003A\0020";
}
- 春はあけぼの
- 夏は夜
- 秋は夕暮れ
- 冬はつとめて
なお、CSS2までの既存のカウンター・スタイルなど仕様書であらかじめ定義されているカウンター・スタイルもあり、これらのカウンター・スタイルは“@counter-style”ルールで定義せずに使用することが可能です。
また、CSSの仕様書で定義されているカウンター・スタイル以外にもW3Cによって公開されている既製のカウンター・スタイルもあります。これらのカウンター・スタイルはウェブ制作者が“@counter-style”ルールを使用して自作のスタイルシートに組み込むことで使用することが可能です。
“list-style-type”プロパティや“list-style”プロパティで指定された“<counter-style-name>”値と一致する名前を持つカウンター・スタイルがない場合には定義済みのカウンター・スタイルの“decimal”として扱われます。
仕様書
定義されている仕様書
定義済みのカウンター・スタイルの一覧
定義済みのカウンター・スタイル
カウンター・スタイルは“@counter-style”ルールを使用して独自に定義することが可能ですが、CSS2まで定義されていたカウンター・スタイルのキーワード値も“@counter-style”ルールを使用して再定義されたうえでユーザー・エージェントが既定で実装するべき定義済みのカウンター・スタイルとして仕様書に記載されており、今まで通り使用することが可能です。
ol { list-style: decimal;}
- 春はあけぼの
- 夏は夜
- 秋は夕暮れ
- 冬はつとめて
また、定義済みのカウンター・スタイルにはCSS2までの既存のカウンター・スタイル以外にも様々な言語による多数のカウンター・スタイルが含まれており、その中にはひらがなやカタカナ、漢数字のカウンター・スタイルもあります。
ol { list-style: japanese-formal;}
- 春はあけぼの
- 夏は夜
- 秋は夕暮れ
- 冬はつとめて
これらのカウンター・スタイルはウェブ制作者が“@counter-style”ルールで定義せずに直接カウンター・スタイル名を“list-style-type”プロパティや“list-style”プロパティの値として使用することで使用することが可能です。
数字によるカウンター・スタイル
| 値 | 説明 | |
|---|---|---|
| 文字の種類 | 例 | |
| decimal | 10進数の数字 | “1”,“2”,“3”,“4”,... |
| decimal-leading-zero | ゼロ埋めした10進数の数字 | “01”,“02”,“03”,“04”,... |
arabic-indic |
アラビア・インド数字 | “١”,“٢”,“٣”,“٤”,... |
| armenian | 大文字のアルメニア文字 | “Ա”,“Բ”,“Գ”,“Դ”,... |
| upper-armenian |
||
| lower-armenian |
小文字のアルメニア文字 | “ա”,“բ”,“գ”,“դ”,... |
| bengali |
ベンガル数字 | “১”,“২”,“৩”,“৪”,... |
| cambodian |
クメール数字 | “១”,“២”,“៣”,“៤”,... |
| khmer |
||
| cjk-decimal |
位取り記数法の漢数字 | “一”,“二”,“三”,“四”,... |
| devanagari |
デーヴァナーガリー数字 | “१”,“२”,“३”,“४”,... |
| georgian | グルジア文字 | “ა”,“ბ”,“გ”,“დ”,... |
| gujarati |
グジャラーティー数字 | “૧”,“૨”,“૩”,“૪”,... |
| gurmukhi |
グルムキー数字 | “੧”,“੨”,“੩”,“੪”,... |
| hebrew |
ヘブライ数字 | “א”,“ב”,“ג”,“ד”,... |
| kannada |
カンナダ数字 | “೧”,“೨”,“೩”,“೪”,... |
| lao |
ラーオ数字 | “໑”,“໒”,“໓”,“໔”,... |
| malayalam |
マラヤーラム数字 | “൧”,“൨”,“൩”,“൪”,... |
| mongolian |
モンゴル数字 | “᠑”,“᠒”,“᠓”,“᠔”,... |
| myanmar |
ビルマ数字 | “၁”,“၂”,“၃”,“၄”,... |
| oriya |
オリヤー数字 | “୧”,“୨”,“୩”,“୪”,... |
| persian |
ペルシア数字 | “۱”,“۲”,“۳”,“۴”,... |
| lower-roman | 小文字のASCIIローマ数字 | “i”,“ii”,“iii”,“iv”,... |
| upper-roman | 大文字のASCIIローマ数字 | “I”,“II”,“III”,“IV”,... |
| tamil |
タミル数字 | “௧”,“௨”,“௩”,“௪”,... |
| telugu |
テルグ数字 | “౧”,“౨”,“౩”,“౪”,... |
| thai |
タイ数字 | “๑”,“๒”,“๓”,“๔”,... |
| tibetan |
チベット数字 | “༡”,“༢”,“༣”,“༤”,... |
アルファベットによるカウンター・スタイル
| 値 | 説明 | |
|---|---|---|
| 文字の種類 | 例 | |
| lower-alpha | 小文字のASCII文字 | “a”,“b”,“c”,“d”,... |
| lower-latin | 小文字のラテン文字 | |
| upper-alpha | 大文字のASCII文字 | “A”,“B”,“C”,“D”,... |
| upper-latin | 大文字のラテン文字 | |
| lower-greek | 小文字のギリシャ文字 | “α”,“β”,“γ”,“δ”,... |
| hiragana |
50音順のひらがな | “あ”,“い”,“う”,“え”,... |
| hiragana-iroha |
いろは順のひらがな | “い”,“ろ”,“は”,“に”,... |
| katakana |
50音順のカタカナ | “ア”,“イ”,“ウ”,“エ”,... |
| katakana-iroha |
いろは順のカタカナ | “イ”,“ロ”,“ハ”,“ニ”,... |
記号によるカウンター・スタイル
| 値 | 説明 | |
|---|---|---|
| 文字の種類 | 例 | |
| disc | ビュレット(“•”、U+2022)、もしくは類似した黒丸 | “•”、“•”、“•”、... |
| circle | 白ビュレット(“◦”、U+25E6)、もしくは類似した白丸 | “◦”、“◦”、“◦”、... |
| square | 小さな黒四角(“▪”、U+25AA)、もしくは類似した黒四角 | “▪”、“▪”、“▪”、... |
| disclosure-open |
折り畳みウィジェットが閉じていることを表すマーカー | “▸”など |
| disclosure-closed |
折り畳みウィジェットが開いていることを表すマーカー | “▾”など |
有限のカウンター・スタイル
| 値 | 説明 | |
|---|---|---|
| 文字の種類 | 例 | |
| cjk-earthly-branch |
十二支 | “子”,“丑”,“寅”,“卯”,... |
| cjk-heavenly-stem |
十干 | “甲”,“乙”,“丙”,“丁”,... |
複雑なカウンター・スタイル
| 値 | 説明 | |
|---|---|---|
| 文字の種類 | 例 | |
| japanese-informal |
日本語の小字の漢数詞 | “一”,“二”,“三”,“四”,... |
| japanese-formal |
日本語の大字の漢数詞 | “壱”,“弐”,“参”,“四”,... |
| korean-hangul-formal |
朝鮮語のハングルの数詞 | “일”,“이”,“삼”,“사”,... |
| korean-hanja-informal |
朝鮮語の小字の漢数詞 | “一”,“二”,“三”,“四”,... |
| korean-hanja-formal |
朝鮮語の大字の漢数詞 | “壹”,“貳”,“參”,“四”,... |
| simp-chinese-informal |
中国語の簡体字の小字の漢数詞 | “一”,“二”,“三”,“四”,... |
| simp-chinese-formal |
中国語の簡体字の小字の漢数詞 | “壹”,“贰”,“叁”,“肆”,... |
| trad-chinese-informal |
中国語の繁体字の大字の漢数詞 | “一”,“二”,“三”,“四”,... |
| cjk-ideographic |
小字の漢数詞 | |
| trad-chinese-formal |
中国語の繁体字の大字の漢数詞 | “壹”,“貳”,“參”,“肆”,... |
| ethiopic-numeric |
ゲエズ数字 | “፩”,“፪”,“፫”,“፬”,... |
