Blogブログ

【counter】CSSで自動で連番を振る

こんにちは、WEBチームのSです。
今日はCSSのCounterについてご紹介したいと思います。

olタグを使うと自動的に連番が振られますよね。でもolタグ以外の他の複雑な要素にも連番を振っていきたいというときありませんか？
（たとえば、sectionの中のh2とか・・・）
そんなときに便利なのがcounterです。
counterはとくに記事など作るときによく使えると思います！

以下の要素の「みだし」の先頭に連番を振っていきます。

.block {
  counter-reset: num_a;
}
.box {
  background: #fff;
  width: 200px;
  margin: 0 auto 20px;
  padding: 20px;
}
.heading_a::before{
  content: counter(num_a);
  counter-increment: num_a;
}

• content:countet(num_a);を指定
  見出しの先頭に表示させるので、beforeを使用します。
  ※今回はnum_aという名前をつけていますが、自由に決めて大丈夫です。
• counter-increment:num_a;
  counter-incrementはカウンター数値の増加についての指定です。
  上記はカウンターの名前だけ入れており、この場合は１ずつ増えます。
  こちらの指定で減少させるパターンや2ずつ増加など、様々なパターンが自由に作れます！
• counter-reset:num_a;
  指定したカウンターのリセットする位置の指定です。
  .blockに対してcounter-resetしているので、blockの範囲内では連番で動作します。
  .block範囲外ではresetされ、1から始まります。

▼上記の指定結果

見出しの先頭に1、2、3の数字が付きました！

同じ範囲で2つのカウンターを使用することもできます。

.block {
  counter-reset: num_a num_b;
}
.box {
  background: #fff;
  width: 200px;
  margin: 0 auto 20px;
  padding: 20px;
}
.heading_a::before{
  content: counter(num_a);
  counter-increment: num_a;
}
.heading_b::before{
  content: counter(num_b);
  counter-increment: num_b 3;
}

• num_bのほうは3ずつ増えるカウンターにしています。
• couter-resetは複数指定ができるので2つまとめてリセットできます！

▼上記の指定結果

二種類のカウンターが交互に配置されていても、しっかり動作しているのが分かりますね！