counter() ファンクション
counter() ファンクションは、カテゴリーの見出しやリストの番号付けに利用される CSS 関数です。content プロパティの値として利用します。
<ol> といったリストばかりでなく <h2>-<h6> といったヘッダーや、<p> といった段落ごとに番号を付けるといったことに利用できます。
div#example{
counter-reset: num;
}
div#example p::before{
counter-increment: num; /* １つずつ増加 */
content: counter(num) ". "; /* 表示 */
}
counter() ファンクションを使うことで番号付を付けることがでます。
counter() ファンクションは content プロパティで使用します。
この表示例のように段落ごとにも番号を付けることができます。
詳しくは Example を参照してください
counter() ファンクションを数値で利用するためには、counter-reset、counter-increment といったプロパティを使用する必要があります。
counter-reset は親エレメントに設定します。
counter() ファンクションは入れ子のリストでは複数の変数を用意しなければなりません。入れ子の <ol> リストで番号付けすることに限っては counters() ファンクションを使用したほうが簡易です。
ページ内 Index
構文(Syntax)
counter() ファンクションの構文です。
CSS
counter( counter ) counter( counter, counter-style )
引数
counter は任意の変数名です。
counter-reset で数値で初期化ができます。何も指定がなければ 0 です。初期化は以下のようにします。
counter-reset: num 10;
counter-style は以下のスタイルが利用できます。
| armenian | アルメニア数字 |
| circle | 白丸で表示 |
| cjk-ideographic | 漢数字 |
| decimal | デフォルト |
| decimal-leading-zero | 10以下は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() ファンクションを数値で利用するためには、counter-reset、counter-increment といったプロパティを使用する必要があります。
counter-reset は親エレメントに設定します。
ヘッダーに番号を自動で付加
counter() ファンクションでヘッダー（ <h2> ）ごとに番号を自動で付加します。
カウンタースタイルを指定
以下は、counter-style を使用した場合の例です。counter-style は構文(Syntax)の引数
を参照してください。