counters() ファンクション
counters() ファンクションは、番号付けリスト <ol> エレメント を入れ子にするときの番号付に利用する CSS の関数です。content プロパティの値として利用されます。
似たファンクションに counter() ファンクションがありますが、入れ子のリストでは複数の設定が必要になります。
counters() ファンクションは、簡易に入れ子のリストで番号付けができます。
ただし、<ol> エレメントのみです。
body {
counter-reset: num; /* カウンター初期化 */
}
li::before {
counter-increment: num; /* １つずつ増加 */
content: "第" counters(num, ".") "章 "; /* 値を表示 */
}
詳しくは Example を参照してください
counters() ファンクションを数値で利用するためには、counter-reset、counter-increment といったプロパティを使用する必要があります。
counter-reset は親エレメントに設定します。
counters() ファンクションが機能するには、<ol> エレメント が入れ子の階層になっていなければなりません。
ページ内 Index
構文(Syntax)
CSS
counters( counter, "string" ) counters( counter, "string", counter-style )
引数
counter は任意の変数名です。
counter-reset で数値で初期化ができます。何も指定がなければ 0 です。初期化は以下のようにします。
counter-reset: num 10;
第２引数の string は区切りに使う文字列です。
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
以下は counters() ファンクションの例です。
<ol> エレメントでの counters() ファンクション
<ol> で簡易に機能します。<ol> は入れ子になっているかが記録されているようです。
<ol> 以外の入れ子の見出し番号
<ol> エレメント以外の入れ子の内容においてヘッダーに番号を付けようとすると counters() ファンクションは機能しないようです。
以下のように複数の counter() ファンクションを組み合わせるしかないようです。