HTML/CSS

2020.08.15

CSS|counter-incrementを使って自動で連番をつける

リスト要素(olli)だったら、連番にするのはlist-style: decimalを追加するだけでいいですが、例えば見出しに番号を振りたい場合などは、CSSカウンターを使用します。

カウンターは「counter-reset」と「counter-increment」でワンセット

親要素にcounter-resetを、子(孫)要素にcounter-incrementを設定します。

ounter-reset カウントを初期化(0)
counter-increment カウントを増減(1加算)

.sample {
  counter-reset: section;          /* 'section'というカウンターを初期化 */
}
.sample p:before {
  counter-increment: section;      /* 'section'に1(デフォルト)を加算 */
  content: counter(section);       /* カウンターを表示 */
}
<div class="sample">
  <p>Heading</p>
  <p>Heading</p>
  <p>Heading</p>
</div>

結果

Heading

Heading

Heading

カウンターの初期値や増減数を変更

counter-reset : カウンター名 開始番号 : 開始番号を設定すれば、そこからカウントします。
counter-increment : カウンター名 増減数 : 増減数はマイナスもいけます。
contentでカウンターを表示しているだけなので、番号のあとに-ハイフンを入れたり、()を付けたりもできます。

.sample1 {
  counter-reset: section 10;       /* 'section'を10から開始 */
}
.sample1 p:before {
  counter-increment: section -2;   /* 'section'に-2 */
  content: counter(section)" - ";  /* 連番の後に'-'を追加して表示 */
}

結果

Heading

Heading

Heading

カウンターの入れ子は「counters()」で表示

counters()関数を使用すれば、入れ子の連番表示もできます。

ol {
  counter-reset: section;     /* 'section'を初期化 */
  list-style-type: none;
}
ol li:before {
  counter-increment: section;            /* カウンターに加算 */
  content: counters(section, "-") " ";   /* カウンターを'-'で区切る */
}
<ol>
  <li>Heading</li>
  <li>Heading</li>
  <li>Heading<ol>
      <li>Heading</li>
      <li>Heading<ol>
          <li>Heading</li>
          <li>Heading</li>
        </ol></li>
    </ol></li>
  <li>Heading</li>
</ol>

結果

  1. Heading
  2. Heading
  3. Heading
    1. Heading
    2. Heading
      1. Heading
      2. Heading
  4. Heading

参考サイト