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

counter() ファンクション

 counter() ファンクションは、カテゴリーの見出しやリストの番号付けに利用される CSS 関数です。content プロパティの値として利用します。

 <ol> といったリストばかりでなく <h2>-<h6> といったヘッダーや、<p> といった段落ごとに番号を付けるといったことに利用できます。

counter() ファンクション
body {
	counter-reset: num;   /* カウンターの初期化 */
}

h2::before {
	counter-increment: num;   /* 1つずつ増加 */
	content: "第" counter(num) "章 ";   /* 表示 */
}

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

 counter() ファンクションを数値で利用するためには、counter-resetcounter-increment といったプロパティを使用する必要があります。
 counter-reset は親エレメントに設定します。

 counter() ファンクションは入れ子のリストでは複数の変数を用意しなければなりません。入れ子の <ol> リストで番号付けすることに限っては counters() ファンクションを使用したほうが簡易です。

ページ内 Index

構文(Syntax)

CSS

counter( counter )
counter( counter, counter-style )

引数

 counter は任意の変数名です。
 counter-reset で数値で初期化ができます。何も指定がなければ 0 です。初期化は以下のようにします。

counter-reset でカウンターを 10 に初期化
counter-reset: num 10;

 counter-style は以下のスタイルが利用できます。

armenianアルメニア数字
circle白丸で表示
cjk-ideographic漢数字
decimalデフォルト
decimal-leading-zero10以下は0をつけた算用数字
georgianグルジア数字
hebrewヘブライ数字
hiraganaひらがな – あいうえお順
hiragana-irohaひらがな – いろは順
inherit親要素から継承
katakanaカタカナ – アイウエオ順
katakana-irohaカタカナ – イロハ順
lower-alpha小文字のアルファベット
lower-greek小文字のギリシャ文字
lower-latin小文字のアルファベット
lower-roman小文字のローマ数字
upper-alpha大文字のアルファベット
upper-latin大文字のアルファベット
upper-roman大文字のローマ数字

Example

 以下は counter() ファンクションの例です。

 counter() ファンクションを数値で利用するためには、counter-resetcounter-increment といったプロパティを使用する必要があります。
 counter-reset は親エレメントに設定します。

ヘッダーに番号を自動で付加

 counter() ファンクションでヘッダー( <h2> )ごとに番号を自動で付加します。

カウンタースタイルを指定

 以下は、counter-style を使用した場合の例です。counter-style は構文(Syntax)の引数を参照してください。