備忘録的プログラミングリファレンス

@counter-style

　@counter-style は、リストのマーカーをカスタムに定義できる at-rule の１つです。
　マーカーの定義は、@counter-style のディスクリプタの選択と値の指定によって行います。

@counter-style
@counter-style example_style{
	system: numeric;
	symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
	suffix: ". ";
}

詳しくは Example を参照してください

　symbols や additive-symbols ディスクリプタで指定された文字列をリストマーカーとして利用します。

　読み込む CSS ファイルによっては一部文字コードを指定しなければならない場合があるかもしれません。その場合は content プロパティと @counter-style で文字コードを指定することができます。

　CSS ファイルに使われる文字コードと別の文字コードを指定すると文字化けなどの不都合が生じます。自動で識別された方が間違いは起こりにくいかもしれません。

　@counter-style は、CSS ファイルで使用します。HTML 中や特に style 属性に @counter-style を指定しても機能しない場合があります。

　at-ruleは、@-規則や@ルール、アットルールと言われます。

構文(Syntax)

　@counter-style は、リストのマーカーをカスタムに定義できます。定義名は以下の_name部分に指定します。

　さらに以下のようなディスクリプタによってリストマーカーを定義します。

@counter-style _name{
	system: numeric;   /* リストマーカーの種類をキーワードで指定 */
	symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';   /* 順次表示されるマーカー */
	additive-symbols: 10 X, 5 V, 1 I; /* system が additive で機能 */
	negative: '- ';   /* 負数の表現定義 */
	prefix: " ";   /* マーカーの直前にに付加される文字列 */
	suffix: " ";   /* マーカーの直後に付加される文字列 */
	range: 2 4, 12 14;   /* @counter-style の適用範囲 */
	pad: ;   /* マーカーの最小文字数と不足分を埋める文字列 */
	fallback: ;   /* 代替え表現 */
};

system

　system は 以下の symbols や additive-symbols の表現方法をキーワードで指定します。キーワードには以下があります。

cyclic
symbols に指定された文字列を繰り返します。
numeric
symbols に指定された文字列を位取り記数法によって繰り返し表示します。symbols に指定された文字列が一順すると上の桁に使用されます。最初を 0 とするため symbols に指定された先頭の文字列を表示しません。
alphabetic
symbols に指定された文字列を繰り返し表示します。symbols に指定された文字列が一順すると上の桁に使用されます。最初を 1 として symbols に指定された先頭の文字列を表示します。
symbolic
symbols に指定された文字列を繰り返し表示します。symbols に指定された文字列が一順すると１つ増やして指定文字列が巡回します。
additive
symbols に指定に加えて additive-symbols の指定が必要になります。
fixed
symbols に指定された文字列が一巡すると該当する番号または fallback で指定された文字列になります。
extends
symbols や additive-symbols の指定を必要としない番号付けをします。

symbols

　symbols はマーカーとして表示する文字列を指定します。'または"で文字列を囲みます。
　複数を指定すると、symbols で指定した順番とリストの順番を合わせて表示します。順番に関する細かい指定は negative、range、pad、fallback で行います。

additive-symbols

　additive-symbols は、上記の system: additive; の時に機能します。任意の番号のマーカーをカスタマイズできます。10 X, 5 V, 1 Iとするとローマ数字として解釈してくれるようです。

negative

　negative は、マーカーの順番が <ol start="-2"> のようにマイナスから始める場合に負数をどのように表現するかをカスタマイズできます。

prefix、suffix

　prefix に指定された文字列は symbols や additive-symbols に定義された文字列の直前に表示されます。
　suffix はその直後です。

range

　range は任意の範囲のみに symbols で指定した文字列を表示します。

pad

　pad はマーカーの文字数や桁数を指定します。その文字数や桁数に満たない場合は指定された文字列で埋めます。

fallback

　fallback は、system: fixed; や range が設定されている場合に symbols の設定以外のマーカーをどのように表示するかを指定します。
　キーワードには、decimal、 disc、 square、 circle、 disclosure-open、 disclosure-closed などの list-style-type で指定する値が使用できます。

Example

　@counter-styleの例です。単純に 1 から 9 までの番号付を行います。

関連（Related）