counter() ファンクション
counter() ファンクションは、リストやカテゴリーの見出しの番号といった番号付けに利用される CSS 関数です。content プロパティの値として利用されます。
body {
counter-reset: num; /* カウンターの初期化 */
}
h2::before {
counter-increment: num; /* １つずつ増加 */
content: "第" counter(num) "章 "; /* 表示 */
}
詳しくは Example を参照してください
counter() ファンクションを数値で利用するためには、counter-reset、counter-increment といったプロパティを使用する必要があります。
counter-reset は親エレメントに設定します。
counter() ファンクションは入れ子のリストでは複数の変数を用意しなければなりません。入れ子の <ol> リストで番号付けすることに限っては counters() ファンクションを使用したほうが簡易です。
ページ内 Index
構文(Syntax)
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-style を使用した場合の例です。counter-style は構文(Syntax)の引数
を参照してください。