概要

CSSプロパティ｢counter-increment｣は、カウンターの値を増幅させる際に使用します。これは-1, -2, -3といったマイナスの値を指定して、減少させることもできます。このプロパティと content プロパティに用意されているcounter()関数などをセットで使用することで、要素にカウンターの値を加えることができます。

<h1>言語について</h1>
<h2 class="count">CSSとは</h2>
<p>Cascading Style Sheetの略です。・・・</p>
<h2 class="count">HTMLとは</h2>
<p>HyperText Markup Languageの略です。・・・</p>
<style>
.count {
  counter-increment: number;
}
.count::before {
  content: counter(number)'. ';
}
</style>

取りうる値

カウンタ名はユーザー独自の名前を指定します。この指定した値を使って関連付けさせていきます。また複数指定することもできます。

更に、整数値を指定すると、その左隣のユーザー指定名に対して指定した数値を起点にすることができます。下記の場合だと「カウンタ２」が該当します。

{ counter-increment: カウンタ名 数値}
{ counter-increment:　カウンタ名1　カウンタ名2 数値}

指定可能な内容と説明です。

値	説明
none	初期値です。カウンタを進めません
カウンタ名	指定したカウンタを１つ進めます
カウンタ名 整数値	指定した数値の分だけ前後します

入れ子の場合

content プロパティの ｢counters()｣関数、と counter-reset プロパティを使うことで、下記のような入れ子の数値を表示させることも可能です。

<ol>
  <li>項目</li>
  <li>項目
    <ol>
      <li>項目</li>
      <li>項目</li>
      <li>項目
        <ol>
          <li>項目</li>
          <li>項目</li>
        </ol>
      </li>
      <li>項目</li>
    </ol>
  </li>
  <li>項目</li>
  <li>項目</li>
</ol>
<style>
ol {
  counter-reset: item;
  list-style: none;
  padding: 3px;
}
li {
  color: #000;
  display: block;
  background: #ddd;
  margin:5px;
  padding:5px;
}
li:before {
  content: counters(item, "-")". ";
  counter-increment: item;
}
</style>

使用例

01、02などゼロから始まるゼロパディングの表示例です。値に「decimal-leading-zero」を指定することで簡単に実装できます。

<ul>
  <li>項目です</li>
  <li>項目です</li>
  <li>項目です</li>
  <li>項目です</li>
  <li>項目です</li>
  <li>項目です</li>
</ul>
<style>
li {
  list-style: none;
  counter-increment: item;
}
li::before {
  content: counter(item, decimal-leading-zero);
}
</style>

仕様書

• CSS Level 2 (Revision 1)

関連CSSプロパティ

• counter-increment
• counter-reset