CSS@counter-style @規則で、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 @counter-style 規則はカウンターの値をどのように文字列表現に変換するかを定義します。

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、年月が経つにつれて、あらかじめ定義されたセットに他のスタイルが追加され、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 @counter-style @規則は、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。

構文

記述子

@counter-style は名前で識別され、記述子のセットを持ちます。

system
カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。
negative
値が負の数の時に、カウンター表現の前又は後に追加する記号を指定します。
prefix
マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。
suffix
prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。
range
カウンタースタイルが適用される値の範囲を定義します。カウンタースタイルが範囲を外れたカウンター値を表現するために使用されると、カウンタースタイルにはフォールバックスタイルが代用されます。
pad
マーカー表現に最短文字数を適用する必要がある場合に使用されます。建夫ば、カウンターが 01 から始まって 02, 03, 04 のように進む場合は、パッド文字が使用されます。指定されたパッド値よりも長い文字数の場合は、マーカーは普通通りに構築されます。
fallback
指定したシステムでカウンター値の表現を構築できない場合や、カウンター値が指定された範囲の外にあった場合に、代わりに使用されるシステムを指定します。指定されたフォールバックも値の表現に失敗した場合は、フォールバックスタイルのフォールバックがあれば、それが使用されます。フォールバックシステムが記述されていない場合や、フォールバックシステムのチェーンがカウンター値を表現できなかった場合は、最終的に decimal スタイルにフォールバックされます。
symbols
マーカー表現に使用される記号を指定します。記号は文字列、画像、カスタム識別子を含むことができます。記号がマーカー表現を構築するためにどのように使用されるかは、 system 記述子で指定されたアルゴリズムによります。例えば、 system が fixed に指定されていた場合は、この記述子で N 個の記号が指定されていると、カウンターの最初の N 個の記号を表すために使用されます。記号のセットを使い切ると、リストの残りにはフォールバックスタイルが使用されます。

以下の @counter-style 規則では、文字の記号ではなく画像を使用しています。
@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}
additive-symbols
symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の加算的タプルに依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。
speak-as
読み上げソフトのような音声シンセサイザーで、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。

形式文法

@counter-style <counter-style-name> {
  [ system: <counter-system>; ] ||
  [ symbols: <counter-symbols>; ] ||
  [ additive-symbols: <additive-symbols>; ] ||
  [ negative: <negative-symbol>; ] ||
  [ prefix: <prefix>; ] ||
  [ suffix: <suffix>; ] ||
  [ range: <range>; ] ||
  [ pad: <padding>; ] ||
  [ speak-as: <speak-as>; ] ||
  [ fallback: <counter-style-name>; ]
}

where
<counter-style-name> = <custom-ident>

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

上記のカウンタースタイル規則は、このようにリストに適用されます。

.items {
  list-style: circled-alpha;
}

このようなリストを生み出します。

Ⓐ One
Ⓑ Two
Ⓒ Three
Ⓓ Four
Ⓔ FIve
...
...
Ⓨ Twenty Five
Ⓩ Twenty Six
27 Twenty Seven
28 Twenty Eight
29 Twenty Nine
30 Thirty

他の例はデモページをご覧ください。

仕様書

仕様書 状況 備考
CSS Counter Styles Level 3
counter-style の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
additive-symbols
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
fallback
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
negative
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
pad
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
prefix
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
range
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
speak-as
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
suffix
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
symbols
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
system
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

Quantum CSS のメモ

  • Gecko は @counter-stylesystem 及び fallback 記述子の値として none を許容していますが、これは仕様書が無効な@規則として扱うべきものです。 Firefox の新しいパラレル CSS エンジン (Quantum CSS 又は Stylo とも呼ばれ、 Firefox 57 でリリースされる計画) ではこれを修正する予定です (バグ 1377414)。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mfluehr
最終更新者: mfuji09,