CSS Reference

@counter-style

カウンタースタイルを定義する

@counter-style 規則は、カウンターのスタイルを定義するための @規則です。定義したスタイルは list-style-type プロパティ（あるいは list-style 一括指定プロパティ）で指定することでリストのマーカーとして使用できます。

list-style-type プロパティには、様々な定義済みの <custom-ident> 値が使用できます。

例えば、list-style-type: cjk-decimal; を指定することで、漢数字をリストマーカーとして表示することができます。しかし、このような <custom-ident> 値の定義を CSS の仕様ですべて行うには限界があるため、制作者が、任意で <custom-ident> 値に該当するものを定義できるようにする仕組みが @counter-style 規則です。

@counter-style 規則の記述は、例えば下記のようになります。

@counter-style hiragana-iroha {
  system: alphabetic;
  symbols: い ろ は に ほ へ と ち り ぬ る を わ か よ た れ そ つ ね な ら む う ゐ の お く や ま け ふ こ え て あ さ き ゆ め み し ゑ ひ も せ す;
  suffix: "、";
}

定義したカウンタースタイルは下記のように使用します。

ol {
  list-style: hiragana-iroha;
}

この場合、実際の表示は下記のようになります。

い、リスト項目
ろ、リスト項目
は、リスト項目
...略...

下記に、@counter-style 規則のコードスニペットがまとまっていますので、参考にしてみてもよいでしょう。

詳細説明

system 記述子

cyclic、numeric、alphabetic、symbolic、additive、fixed、いずれかの値を単体で、もしくは fixed 2 のように、fixed と任意の数値を組み合わせて、もしくは extends decimal のように、extends と任意のカウンタースタイル名を組み合わせて指定することができます。

cyclic 一連の記号を一巡します。
symbols 記述子で指定された記号を最初から順番に使用し、最後に到達すると最初に戻ってやり直すというサイクルを繰り返します。
symbols 記述子には1つ以上の記号を指定する必要があります。
numeric 一連の記号を位取り記数法として解釈します。
例えば、symbols 記述子で指定された記号が 0 1 2 だった場合、1巡目は 1 → 2 となりますが、2巡目は、10 → 11 → 12、3巡目は、20 → 21 → 22 のように解釈されます。
symbols 記述子には2つ以上の記号を指定する必要があります。
alphabetic 一連の記号をアルファベットの記数法として解釈します。
例えば、symbols 記述子で指定された記号が a b c だった場合、1巡目は a → b → c となりますが、2巡目は、aa → ab → ac、3巡目は、ba → bb → bc のように解釈されます。
symbols 記述子には2つ以上の記号を指定する必要があります。
symbolic 一連の記号を一巡しますが、一巡すると、二巡目以降は記号が2重、3重と重なっていきます。
例えば、symbols 記述子で指定された記号が ■ ○ だった場合、1巡目は ■ → ○ となりますが、2巡目は、■■ → ○○、3巡目は、■■■ → ○○○ のように記号が重なっていきます。
symbols 記述子には1つ以上の記号を指定する必要があります。
additive additive-symbols 記述子によって、sign-value 形式（「負でない整数 記号」という形式）で指定された記号を使用します。
例えば、additive-symbols: 6 ⚅, 5 ⚄, 4 ⚃, 3 ⚂, 2 ⚁, 1 ⚀; と指定された場合、1～6番目までは、⚀ → ⚁ ... ⚅ となり、7番目は ⚅⚀、13番目であれば ⚅⚅⚀ のように解釈されます。
additive-symbols 記述子には1組以上のタプルを指定する必要があります。
fixed 一連の記号を一巡しますが、一巡するとそれ以降はフォールバックします。フォールバックするカウンタースタイルは、fallback 記述子で指定できます（指定がない場合は decimal として扱われます）。
例えば、symbols 記述子で指定された記号が ■ ○ だった場合、■ → ○ となった次は、3 → 4 のように解釈されます。
任意で、fixed 3 のように記号が使用される最初の値を指定することも可能で、この場合、1 → 2 → ■ → ○ → 5 → 6 のように解釈されます。
extends 既存のカウンタースタイルを使用します。後述する prefix や suffix 記述子と組み合わせることで、既存のカウンタースタイルを拡張できます。
例えば、extends decimal として、decimal カウンタースタイルを定義しつつ、suffix: ") "; を組み合わせることで、1) → 2) のようなリストマーカーを表示することが可能です。@counter-style 規則で独自に定義したカウンタースタイルを指定することも可能です。
extends を使用する場合、symbols 記述子や additive-symbols 記述子を指定してはいけません。

negative 記述子

カウンター値が負の数の時に、リストマーカーの前、あるいは後に追加する記号を指定します。初期値は - です。

前、後の2つの値を指定できます。例えば、negative: "(" ")"; と指定した場合、負のカウンター値の場合は (1) のような表示となります。

prefix 記述子

リストマーカーの前に追加する記号を指定します。negative 記述子で指定した記号より前に表示されます。初期値は空文字（""）です。

suffix 記述子

リストマーカーの後に追加する記号を指定します。negative 記述子で指定した記号より後に表示されます。初期値は ". " です。

range 記述子

カウンター値の範囲を定義します。初期値は auto ですが、system 記述子の値に依存します。

  • cyclic / numeric / fixed → 負の無限大 ～ 正の無限大
  • alphabetic / symbolic → 1 ～ 正の無限大
  • additive → 0 ～ 正の無限大
  • extends → 拡張元となるカウンタースタイルが定義する範囲

あるいは、下限の値と上限の値を空白文字で区切って範囲指定することも可能です。この時、infinite キーワードを使用すると「無限大」という意味になります。

/* 下限が 0 / 上限が 10 */
range: 0 10;

/* 下限が 6 / 上限が無限大 */
range: 6 infinite;

/* 下限が無限大 / 上限が 10 */
range: infinite 10;

/* 下限も上限も無限大 */
range: infinite infinite;

/* 下限よりも上限が小さい場合は無効 */
range: 10 5; /* Invalid */

pad 記述子

指定した記号でリストマーカーの桁数を埋めます。桁数、記号という順番で空白文字で区切って指定します。初期値は 0 "" です。

例えば、system: extends decimal; に対して pad: 3 "0" のように指定すれば、リストマーカーは、001 ... 012 など、必ず3桁になるように 0 で埋められます。

fallback 記述子

定義したカウンタースタイルでは、リストマーカーの生成ができなかったときにフォールバックするカウンタースタイルを指定します。初期値は decimal です。

speak-as 記述子

読み上げ環境に対して、カウンタースタイルをどのように読み上げるか、その方法を指定します。

指定可能な値は、auto、bullets、numbers、words、spell-out のいずれか、または、別途定義したカウンタースタイルの名前です。初期値は auto です。

auto の場合、system 記述子の値に依存し、下記のように解釈されます。

  • alphabetic → spell-out と同じ
  • cyclic → bullets と同じ
  • extends → 拡張元カウンタースタイルに対する auto の効果と同じ
  • 上記以外 → numbers と同じ

その他の値と意味は下記のようになります。

bullets 順序なしリストを読み上げることに適した音声がユーザエージェントによって選択されます。
numbers カウンター値は、数として読み上げられます。
words カウンター値は、単語として読み上げられます。
spell-out カウンター値は、1文字ずつ読み上げられます。
<counter-style-name> 特定のカウンタースタイル名を指定した場合、そのカウンタースタイルの定義内にある speak-as 記述子の値を参照します。speak-as 記述子が指定されていない場合は、auto として扱われます。

@counter-styleのサンプルソース

@counter-style hiragana-iroha {
  system: alphabetic;
  symbols: い ろ は に ほ へ と ち り ぬ る を わ か よ た れ そ つ ね な ら む う ゐ の お く や ま け ふ こ え て あ さ き ゆ め み し ゑ ひ も せ す;
  suffix: "、";
}

ol {
  list-style: hiragana-iroha;
}
@counter-style parenthesized-ideograph {
  system: fixed;
  symbols: '㈠' '㈡' '㈢' '㈣' '㈤' '㈥' '㈦' '㈧' '㈨' '㈩';
  suffix: ' ';
}

ol {
  list-style: parenthesized-ideograph;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome