counter-increment プロパティ

counter-increment プロパティは、 段落や見出しなどの要素の自動番号付けを設定します。 counter-reset プロパティ、 擬似要素 after と before、 および関数 counter を使用する content プロパティ と組み合わせて使用されます。 理解を深めるために、例を参照することをお勧めします。

構文

cssセレクタ {
  counter-increment: 名前 [増分] | none;
}

値

デフォルト値: none。

例

段落が自動的に番号付けされるようにしましょう：

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

例

番号付けに加えて、何らかのテキストも追加してみましょう。 この例では、数字の前に №（番号）、後にピリオドを付けます：

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

例

番号付けを 10 から始めましょう。このためには、 カウンターの初期値を必要な値より 1 少ない 9 に設定します：

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

例

次に、増分を "2" とした番号付けにしましょう。 このためには、増分に 2 を設定します：

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* 2 を設定 */
  content: "№" counter(test) ".";
}

Результат:

例

前の例では番号付けが 2 から始まりましたが、1 から始めたかったとします。 なぜこうなったのでしょうか？なぜなら counter-reset はカウンターの値を 0 にリセットし、その後 counter-increment がその増分（デフォルトでは 1）を 追加するからです。そのため、以前は番号付けが 1 から始まっていました。 しかし今回は 2 が加算されるため、番号付けが 2 から始まります。

この問題を修正するために、カウンターの初期値を -1 に設定します。 これで、番号付けは 1 から始まり、2 ずつ増加します：

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

関連項目