HTML/CSS

2020.08.15

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

この記事は1558日前に投稿されたものです。

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

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

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

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

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

<div class="sample">
  <p>Heading</p>
  <p>Heading</p>
  <p>Heading</p>
</div>

結果

目次に戻る

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

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

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

結果

目次に戻る

カウンターの入れ子は「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>

結果

目次に戻る

参考サイト

CSS カウンターの使用
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters