CSSカウンターリセットプロパティ

例

カウンター（ "my-sec-counter"）を作成し、<h2>セレクターが出現するたびにカウンターを1つずつ増やします。

body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

h2::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

プロパティは、counter-reset1つ以上のCSSカウンターを作成またはリセットします。

このプロパティは通常、 counter-incrementプロパティおよび contentcounter-resetプロパティと一緒に使用されます。

デフォルト値：	なし
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS2
JavaScript構文：	object .style.counterReset = "section"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
counter-reset	4.0	8.0	2.0	3.1	9.6

CSS構文

counter-reset: none|name number|initial|inherit;

プロパティ値

Value	Description
none	Default value. No counters will be reset
id number	The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

カウンター（ "my-sec-counter"）を作成し、<h2>セレクターが出現するたびにカウンターを1つずつ減らします。

body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
}

例

「セクション1：」、「1.1」、「1.2」などのセクションとサブセクションの番号付け：

body {
   /* Set "section" to 0 */
counter-reset: section;
}

h1 {
   /* Set "subsection" to 0 */
  counter-reset: subsection;
}

h1::before {
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}

h2::before {
  /* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

例

カウンターを作成し、<h2>セレクターが出現するたびにカウンターを1つずつ増やします（ローマ数字を使用）。

body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}

CSSリファレンス

CSS Properties