CSS
カウンター

構文

• カウンタセット：[<カウンタ名> <整数>？ ] + |無し

• カウンタリセット：[<カウンタ名> <整数>？ ] + |無し

• カウンタ増分：[<カウンタ名> <整数>？ ] + |無し

• counter（<counter-name> [、<counter-style>]？）

• カウンタ（<counter-name>、<connector-string> [、<counter-style>]）

パラメーター

備考

ローマ数字のスタイリングをカウンター出力に適用する

CSS

body {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
}

.item:before {
  content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}

HTML

<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

上記の例では、開発者がカウンタのスタイルを明示的に指定したので、カウンタの出力は通常の1,2,3の代わりにI、II、III（ローマ数字）として表示されます。

CSSカウンタを使用して各項目に番号を付ける

CSS

body {
  counter-reset: item-counter; /* create the counter */
}
.item {
  counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
  content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}

/* just for demo */

.item {
  border: 1px solid;
  height: 100px;
  margin-bottom: 10px;
}
.item-header {
  border-bottom: 1px solid;
  height: 40px;
  line-height: 40px;
  padding: 5px;
}
.item-content {
  padding: 8px;
}

HTML

<div class='item'>
  <div class='item-header'>Item 1 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 2 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 3 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>

上記の例の数ページ内のすべての「項目」と（使用して、そのヘッダの前にアイテムの数を加算するcontentの性質.item-headerエレメントのを:before擬似）。このコードのライブデモはこちらから入手できます 。

CSSカウンタを使用したマルチレベルの番号付けの実装

CSS

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

HTML

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

上記は、CSSカウンタを使用したマルチレベルの番号付けの例です。カウンターの自己ネスティング概念を利用しています。自己ネストは、ある要素がすでに指定された名前のカウンタを持っていて、別の要素を作成しなければならない場合に、それを既存のカウンタの子として作成する概念です。ここで、第2レベルのul既に親からlist-item-numberカウンタを継承していますが、それ自身のlist-item-number （子li ）を作成しなければならないので、 list-item-number[1] （for list-item-number[0] （第1レベルのカウンタ）の下にネストします。したがって、マルチレベルの番号付けを実現します。

counters()関数は、出力を印刷するときにすべての上位カウンタ（親）の値の前に置くように設計されているため、 counter() counters()関数の代わりにcounters()関数を使用して出力を出力します。