Widely available 条件付きOK。主要ブラウザで対応済み。装飾的なリストスタイルの実装に便利。

@counter-style

@counter-style は CSS のアットルールで、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 @counter-style ルールには記述子を設定し、カウンター値を文字列表現に変換する方法を定義します。

CSS は多くの便利な定義済みカウンタースタイルを提供していますが、@counter-style アットルールは、カウンターを作成するための自由度の高い方法を提供します。このアットルールは、定義済みスタイルが要件に合わない場合に、作成者が自分自身でカウンタースタイルを定義できるようにすることで、世界中の字組みのニーズに対応しています。

リストカスタマイズ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@counter-style
91
91
33
17
91
17
DOM API
CSSCounterStyleRule

CSSCounterStyleRule インターフェイスは @counter-style アットルールを表します。
91
91
33
17
91
17
additiveSymbols

additiveSymbols は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/additive-symbols 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
fallback

fallback は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/fallback 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
name

name は CSSCounterStyleRule インターフェイスのプロパティで、関連付けられたルールの name として定義された <custom-ident> を取得または設定します。
91
91
33
17
91
17
negative

negative は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/negative 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
pad

pad は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/pad 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
prefix

prefix は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/prefix 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
range

range は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/range 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
speakAs

speakAs は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/speak-as 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
suffix

suffix は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/suffix 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
symbols

symbols は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/symbols 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
system

system は CSSCounterStyleRule インターフェイスのプロパティで、 @counter-style/system 記述子の値を取得または設定します。この記述子に値が設定されていない場合、この属性は空文字列を返します。
91
91
33
17
91
17
CSS @ ルール
additive-symbols

additive-symbols は @counter-style アットルールの記述子で、 @counter-style の @counter-style/system 記述子の値が additive に設定されている場合に、カウンター記号を指定するために使用されます。加算システムは、ローマ数字などの符号値記数法を構築するために使用されます。
91
91
33
17
91
17
fallback

fallback は @counter-style アットルールの記述子で、現在のカウンタースタイルが特定のカウンター値でマーカー表現を生成できなかった場合に、代替で使用されるカウンタースタイルを指定するために使用します。
91
91
33
17
91
17
negative

negative は @counter-style アットルールの記述子で、独自のカウンタースタイルを定義する際に、負のカウンター値をどのように表すかを定義することができます。negative 記述子の値は、カウンターの値が負の場合に、カウンターの表現の前後に追加する記号を定義します。
91
91
33
17
91
17
pad

pad は @counter-style アットルールの記述子で、マーカー表現のための最小限の長さを設定するために使用します。
91
91
33
17
91
17
prefix

@counter-style ルールの prefix 記述子は、カウンターのマーカー表現の先頭に追加されるコンテンツを指定します。
91
91
33
17
91
17
range

range 記述子を使用すると、作成者は、 @counter-style アットルールを使用して独自のカウンタースタイルを定義する際に、スタイルを適用するカウンター値の 1 つ以上の範囲を指定することができます。 range 記述子が含まれている場合、定義されたカウンターは、設定された範囲内の値にのみ使用されます。カウンター値が指定された範囲外の場合、そのマーカーの表現を構築するには代替スタイルが使用されます。
91
91
33
17
91
17
speak-as

speak-as 記述子は、与えられた @counter-style で構築されたカウンター記号が、話し言葉でどのように表現されるかを指定します。例えば、カウンター記号を数値として話すか、あるいは単にオーディオキューで表現するかを指定することができます。
91
91
33
91
suffix

suffix は @counter-style ルールの記述子で、マーカーの表現に追加されるものを指定します。
91
91
33
17
91
17
symbols

symbols は CSS の記述子で、指定されたカウンターシステムでカウンター表現を作成するための記号を指定するために使用されます。 @counter-style/system 記述子の値が cyclic、numeric、alphabetic、symbolic、fixed の場合、この記述子を指定する必要があります。
91
91
33
17
91
17
system

system 記述子は、整数値のカウンターを文字列表現に変換するために使用するアルゴリズムを指定します。これは @counter-style で使用され、定義されたスタイルの動作を定義するために使用されます。
91
91
33
17
91
17
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `symbols` 記述子の値として `<image>` をサポートしません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `symbols` 記述子の値として `<image>` をサポートしません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `symbols` 記述子の値として `<image>` をサポートしません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `symbols` 記述子の値として `<image>` をサポートしません。

基本構文

CSS 
@counter-style emoji-list {
  system: cyclic;
  symbols: "🔥" "⭐" "💡" "🎯";
  suffix: " ";
}

ul.emoji {
  list-style-type: emoji-list;
}

@counter-style japanese {
  system: fixed;
  symbols: "一" "二" "三" "四" "五";
  suffix: "、";
}

ライブデモ

emojilist

@counter-style emojilist demo.

プレビュー全画面表示

numbercharacterlist

@counter-style numbercharacterlist demo.

プレビュー全画面表示

symbollist

@counter-style symbollist demo.

プレビュー全画面表示

実務での使いどころ

  • カスタムリストマーカー

    絵文字やブランド固有の記号をリストマーカーとして使用し、デザインに統一感を持たせる。

  • 多言語の番号スタイル

    漢数字やアラビア・インド数字など、各言語に固有の番号体系を定義する。

注意点

  • 非対応ブラウザでは fallback ディスクリプタで指定したスタイルまたは decimal にフォールバックする。

アクセシビリティ

  • カスタムマーカーを使っても、スクリーンリーダーはリスト項目として正しく読み上げる。装飾目的のマーカーに意味を持たせないこと。

参考リンク