このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

カウンター・スタイル

記事Jan.22nd, 2022
リスト・アイテムの順序を表すリスト・マーカーの種類を指定するためのカウンター・スタイルについて
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSのカウンター・スタイル

““<counter-style>”値”とは?

カウンター・スタイル(Counter Style)”はリスト・アイテムの順序を表すリスト・カウンターの値をリスト・マーカーとして使用する文字列にどのように変換するかを指定する規則です。例えば、リストの2番目のリスト・アイテムに付加するリスト・マーカーを“2”とするのか、それとも“ii”や“b”とするのかがカウンター・スタイルによって定められます。

カウンター・スタイルはlist-style-type”プロパティlist-style”プロパティの値として指定できる“<counter-style>”値によってリスト・アイテムに関連付けられます。

CSS2まではカウンター・スタイルを指定するためにdecimallower-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";
}
  1. 春はあけぼの
  2. 夏は夜
  3. 秋は夕暮れ
  4. 冬はつとめて

なお、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;}
  1. 春はあけぼの
  2. 夏は夜
  3. 秋は夕暮れ
  4. 冬はつとめて

また、定義済みのカウンター・スタイルにはCSS2までの既存のカウンター・スタイル以外にも様々な言語による多数のカウンター・スタイルが含まれており、その中にはひらがなやカタカナ、漢数字のカウンター・スタイルもあります。

ol { list-style: japanese-formal;}
  1. 春はあけぼの
  2. 夏は夜
  3. 秋は夕暮れ
  4. 冬はつとめて

これらのカウンター・スタイルはウェブ制作者が@counter-style”ルールで定義せずに直接カウンター・スタイル名をlist-style-type”プロパティlist-style”プロパティの値として使用することで使用することが可能です。

数字によるカウンター・スタイル

説明
文字の種類
decimal 10進数の数字 “1”,“2”,“3”,“4”,...
decimal-leading-zero ゼロ埋めした10進数の数字 “01”,“02”,“03”,“04”,...
arabic-indicCSS Counter Styles Level 3 で追加 アラビア・インド数字 “‎١‎”,“‎٢‎”,“‎٣‎”,“‎٤‎”,...
armenian 大文字のアルメニア文字 “Ա”,“Բ”,“Գ”,“Դ”,...
upper-armenianCSS Counter Styles Level 3 で追加
lower-armenianCSS Counter Styles Level 3 で追加 小文字のアルメニア文字 “ա”,“բ”,“գ”,“դ”,...
bengaliCSS Counter Styles Level 3 で追加 ベンガル数字 “১”,“‎২”,“৩”,“‎৪”,...
cambodianCSS Counter Styles Level 3 で追加 クメール数字 “១”,“២”,“៣”,“៤”,...
khmerCSS Counter Styles Level 3 で追加
cjk-decimalCSS Counter Styles Level 3 で追加 位取り記数法の漢数字 “一”,“‎二”,“三”,“‎四”,...
devanagariCSS Counter Styles Level 3 で追加 デーヴァナーガリー数字 “१”,“२”,“३”,“‎४”,...
georgian グルジア文字 “ა”,“ბ”,“გ”,“დ”,...
gujaratiCSS Counter Styles Level 3 で追加 グジャラーティー数字 “૧”,“૨”,“૩”,“‎૪”,...
gurmukhiCSS Counter Styles Level 3 で追加 グルムキー数字 “੧”,“੨”,“੩”,“‎੪”,...
hebrewCSS Counter Styles Level 3 で追加 ヘブライ数字 “‎א‎”,“‎ב”,“‎ג‎”,“‎ד‎”,...
kannadaCSS Counter Styles Level 3 で追加 カンナダ数字 “೧”,“೨”,“೩”,“‎೪”,...
laoCSS Counter Styles Level 3 で追加 ラーオ数字 “໑”,“໒”,“໓”,“໔”,...
malayalamCSS Counter Styles Level 3 で追加 マラヤーラム数字 “൧”,“൨”,“൩”,“൪”,...
mongolianCSS Counter Styles Level 3 で追加 モンゴル数字 “᠑”,“᠒”,“᠓”,“᠔”,...
myanmarCSS Counter Styles Level 3 で追加 ビルマ数字 “၁”,“၂”,“၃”,“၄”,...
oriyaCSS Counter Styles Level 3 で追加 オリヤー数字 “୧”,“୨”,“୩”,“୪”,...
persianCSS Counter Styles Level 3 で追加 ペルシア数字 “‎۱‎”,“‎۲”,“‎۳‎”,“‎۴‎”,...
lower-roman 小文字のASCIIローマ数字 “i”,“ii”,“iii”,“iv”,...
upper-roman 大文字のASCIIローマ数字 “I”,“II”,“III”,“IV”,...
tamilCSS Counter Styles Level 3 で追加 タミル数字 “௧”,“௨”,“௩”,“௪”,...
teluguCSS Counter Styles Level 3 で追加 テルグ数字 “౧”,“౨”,“౩”,“౪”,...
thaiCSS Counter Styles Level 3 で追加 タイ数字 “๑”,“๒”,“๓”,“๔”,...
tibetanCSS Counter Styles Level 3 で追加 チベット数字 “༡”,“༢”,“༣”,“༤”,...

アルファベットによるカウンター・スタイル

説明
文字の種類
lower-alpha 小文字のASCII文字 “a”,“b”,“c”,“d”,...
lower-latin 小文字のラテン文字
upper-alpha 大文字のASCII文字 “A”,“B”,“C”,“D”,...
upper-latin 大文字のラテン文字
lower-greek 小文字のギリシャ文字 “α”,“β”,“γ”,“δ”,...
hiraganaCSS Counter Styles Level 3 で追加 50音順のひらがな “あ”,“い”,“う”,“え”,...
hiragana-irohaCSS Counter Styles Level 3 で追加 いろは順のひらがな “い”,“ろ”,“は”,“に”,...
katakanaCSS Counter Styles Level 3 で追加 50音順のカタカナ “ア”,“イ”,“ウ”,“エ”,...
katakana-irohaCSS Counter Styles Level 3 で追加 いろは順のカタカナ “イ”,“ロ”,“ハ”,“ニ”,...

記号によるカウンター・スタイル

説明
文字の種類
disc ビュレット(“•”、U+2022)、もしくは類似した黒丸 “•”、“•”、“•”、...
circle 白ビュレット(“◦”、U+25E6)、もしくは類似した白丸 “◦”、“◦”、“◦”、...
square 小さな黒四角(“▪”、U+25AA)、もしくは類似した黒四角 “▪”、“▪”、“▪”、...
disclosure-openCSS Counter Styles Level 3 で追加 折り畳みウィジェットが閉じていることを表すマーカー “▸”など
disclosure-closedCSS Counter Styles Level 3 で追加 折り畳みウィジェットが開いていることを表すマーカー “▾”など

有限のカウンター・スタイル

説明
文字の種類
cjk-earthly-stemCSS Counter Styles Level 3 で追加 十二支 “子”,“丑”,“寅”,“卯”,...
cjk-heavenly-stemCSS Counter Styles Level 3 で追加 十干 “甲”,“乙”,“丙”,“丁”,...

複雑なカウンター・スタイル

説明
文字の種類
japanese-informalCSS Counter Styles Level 3 で追加 日本語の小字の漢数詞 “一”,“二”,“三”,“四”,...
japanese-formalCSS Counter Styles Level 3 で追加 日本語の大字の漢数詞 “壱”,“弐”,“参”,“四”,...
korean-hangul-formalCSS Counter Styles Level 3 で追加 朝鮮語のハングルの数詞 “일”,“이”,“삼”,“사”,...
korean-hanja-informalCSS Counter Styles Level 3 で追加 朝鮮語の小字の漢数詞 “一”,“二”,“三”,“四”,...
korean-hanja-formalCSS Counter Styles Level 3 で追加 朝鮮語の大字の漢数詞 “壹”,“貳”,“參”,“四”,...
simp-chinese-informalCSS Counter Styles Level 3 で追加 中国語の簡体字の小字の漢数詞 “一”,“二”,“三”,“四”,...
simp-chinese-formalCSS Counter Styles Level 3 で追加 中国語の簡体字の小字の漢数詞 “壹”,“贰”,“叁”,“肆”,...
trad-chinese-informalCSS Counter Styles Level 3 で追加 中国語の繁体字の大字の漢数詞 “一”,“二”,“三”,“四”,...
cjk-ideographicCSS Counter Styles Level 3 で追加 小字の漢数詞
trad-chinese-formalCSS Counter Styles Level 3 で追加 中国語の繁体字の大字の漢数詞 “壹”,“貳”,“參”,“肆”,...
ethiopic-numericCSS Counter Styles Level 3 で追加 ゲエズ数字 “፩”,“፪”,“፫”,“፬”,...
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク