CSS カウンタ

ピザ

ハンバーガー

ホットドッグス

CSSカウンタはCSSが保持する「変数」で、値はCSSルールで増加（使用回数を追跡）できます。

カウンタを使用すると、ドキュメント内の内容の位置に応じて外観を調整できます。

カウンタ付きの自動番号

CSSカウンタは「変数」のように働きます。変数の値はCSSルールで増加（使用回数を追跡）できます。

CSSカウンタを使用するには、以下の属性を使用します：

  • counter-reset - カウンタの作成またはリセット
  • counter-increment - カウンタの値を増加
  • content - 生成された内容を挿入
  • counter() または counters() 関数 - カウンタの値を要素に追加

CSSカウンタを使用するには、まず以下を使用する必要があります： counter-reset それを作成します。

以下の例では、ページ（bodyセレクタ内）に対してカウンタを作成し、各 <h2> 要素に対してカウンタの値を増やし、各 <h2> 要素の先頭に "Section <カウンタの値>:" を追加します：

例

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

自分で試してみる

ネストされたカウンタ

以下の例では、ページ（section）に対してカウンタを作成し、各 <h1> 要素（subsection）に対してカウンタを作成します。

"section" カウンタは、各 <h1> 要素に対してカウントし、"Section" と section カウンタの値を書き込みます、"subsection" カウンタは各 <h2> 要素に対してカウントし、section カウンタの値と subsection カウンタの値を書き込みます：

例

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

自分で試してみる

カウンタは、子要素で自動的に新しいカウンタのインスタンスが作成されるため、目次リストの作成に非常に役立ちます。ここでは、 counters() 関数は、異なるレベルのネストされたカウンタ間に文字列を挿入します：

例

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

自分で試してみる

CSS カウンタ属性

属性 説明
content 生成された内容を挿入するために ::before と ::after 仮要素とともに使用します。
counter-increment 1つまたは複数のカウンタの値を増加させます。
counter-reset 1つまたは複数のカウンタを新規作成またはリセットします。