CSS カウンタの利用

CSS カウンタは、 CSS 2.1 の自動的なカウンタとナンバリングの実装です。カウンタの値は counter-reset や counter-increment の使用を通じて操作され、 content プロパティの counter() あるいは counters() 関数を使ってページに表示されます。

カウンタの使用

CSS カウンタの使用のためには、最初に、 0 を初期値として値をリセットしなければなりません。要素にカウンタの値を加えるため、 counter() 関数を使用します。以下の例はそれぞれの h1 要素の先頭に "Section <カウンタの値>:" を加えます。

body {
  counter-reset: section;           /* section のカウンタを 0 にセット */
}

h1:before {
  counter-increment: section;      /* section カウンタを増加 */
  content: "Section " counter(section) ": "; /* カウンタを表示 */
}

カウンタの入れ子

CSS カウンタの新しいインスタンスが子要素で自動的に生成されるため、 CSS カウンタはアウトライン化されたリストを作ることに特に役立ちます。 counters() 関数を使って、入れ子となったカウンタの異なる階層の間に、文字列を挿入することができます。

ol {
  counter-reset: section;                /* 各 ol 要素に新しいインスタンスの section カウンタを生成 */
  list-style-type: none;
}

li:before {
  counter-increment: section;            /* section カウンタのこのインスタンスのみ増加 */
  content: counters(section, ".") " ";   /* "." で区切られた section カウンタのインスタンスの値を付加 */
}

上記スタイルを次の HTML に適用すると、コメントにあるようなカウンタのスタイルが適用されます。

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

仕様

参照

• counter-reset
• counter-increment

https://www.mezzoblue.com/archives/20.../counter_intu/に、利用可能な追加の例があります。このブログエントリは 2006 年 11 月 1 日に投稿されたものですが、概ね正確な内容であると思われます。