関連プロパティ

• counter-reset
• counter-increment
• content
• list-style-type

カウンタについて

カウンタで言う識別子とは、個々のカウンタの名前に相当します。これは章のカウンタで、次は節のカウンタ、といった具合に、分けて使えるようにしてあるのです。名前には、IDで使える名前が使えます。

カウンタは、'content'内のカウンタ参照、'counter-increment'、'counter-reset'のどれかが出現すると、その時点で発生します。プログラム用語で言うところの、「変数宣言」は必要ありません。'content'、'counter-increment'で初めてそのカウンタを参照した場合は、そのカウンタは"0"に初期化されているものとして扱います。

カウンタは'content'を用いて書き出して使用します。以下のような形式で記述します。
counters(<識別子>, <'list-style-type'>?)

もう一つ、以下のような形式もありますが、それは後で説明します。
counters(<識別子>, <文字列>, <'list-style-type'>?)

'list-style-type'は、省略出来ます。省略した場合は、デフォルト値、つまり'decimal'となります。

では、実際に使ってみましょう。
h1:before {
   content: "Chapter " counters(chapter) ". ";
   counter-increment: chapter;
   counter-reset: section;
}
h2:before {
   content: counters(chapter) "." counters(section) " ";
   counter-increment: section;
}
こうした場合、h1要素 の手前に Chapter 1.、Chapter 2.、Chapter 3. という具合になって、h2要素 の手前に 1.1 、1.2 、1.3 ・・・ となっていって、h1要素 が出て来た時点でリセット、そこから先は 2.1 、2.2 、2.3 ・・・ となっていきます。

何故、初期値が"0"なのに Chapter 0. 、0.0 から始まらないのかと言いますと、カウンタは、すべて計算してから、その値を表示する事になっているからです。はじめの h1要素 ではカウンタ"chapter"に1を加えて1として、カウンタ"section"を0にリセットする。で、その後で値を書くと・・・「Chapter 1.」となるのです。次に、はじめの h2要素 の場合は、カウンタ"chapter"は1のまま、カウンタ"section"に1足します。そうして表示されるのは、 2.1 となるわけです。

また、カウンタは初期化した後に増減させる事になっていますので、'counter-increment'、'counter-reset'の順が逆になっても、値は変化しません。つまり、(書く事はないですが)仮に
h3:before {
   content: counters(section) ". ";
   counter-increment: section;
   counter-reset: section;
}
と書くと、常に"1. "と追加されます。

ほかにも、"0"や負の値を用いた例を挙げておきましょう。
h1:before {
   counter-increment: chapter 0;
   counter-reset: section -5;
}

3つの引数を採る'counters'の使い方

counters(<識別子>, <文字列>, <'list-style-type'>?)
この形式は、カウンタを備えた要素が入れ子になった時に、カウンタを指定された文字列で区切った値で返すものです。

以下のようなスタイルシートを考えます。
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, "."); counter-increment: item }
で、以下のようなHTMLを書いたとします。
<ol>                    <!-- (item[0]初期化　　 -->
  <li>項目</li>         <!--　item[0]増(=1)　　 -->
  <li>項目              <!--　item[0]増(=2)　　 -->
    <ol>                 <!-- 　(item[1]初期化　 -->
      <li>項目</li>      <!--　　item[1]増(=1)　 -->
      <li>項目</li>      <!--　　item[1]増(=2)　 -->
      <li>項目           <!--　　item[1]増(=3)　 -->
       <ol>             <!--　　(item[2]初期化　-->
         <li>項目</li>  <!--　　 item[2]増(=1)　-->
       </ol>            <!--　　)　　　　　　　 -->
       <ol>             <!--　　(item[3]初期化　-->
         <li>項目</li>  <!--　　 item[3]増(=1)　-->
       </ol>            <!--　　)　　　　　　　 -->
      </li>
      <li>項目</li>      <!--　　item[1]増(=4)　 -->
    </ol>                <!--　 )　　　　　　　　-->
  </li>
  <li>項目</li>         <!--　item[0]増(=3)　　 -->
  <li>項目</li>         <!--　item[0]増(=4)　　 -->
</ol>                   <!-- )　　　　　　　　　-->
<ol>                    <!-- (item[0]初期化　　 -->
  <li>項目</li>         <!--　item[0]増(=1)　　 -->
  <li>項目</li>         <!--　item[0]増(=2)　　 -->
</ol>                   <!-- )　　　　　　　　　-->

そうすると、以下のように表示されます。
1 項目
2 項目
  2.1 項目
  2.2 項目
  2.3 項目
 　 2.3.1 項目
 　 2.3.1 項目
  2.4 項目
3 項目
4 項目

1 項目
2 項目

正誤表にて、引数が2つのカウンタも[counters()]となりました。

注意点

1. 複数のカウンタを制御したい場合は、一つの宣言内で行うようにしましょう。
2. 'display: none'と同じ主体の宣言として置いておくと無効になります。