MENU
  • HOME
  • Arkhe
  • 知識ブログ一覧
日々の知識をOutputしよう
OutPut
  • HOME
  • Arkhe
  • 知識ブログ一覧
  • HOME
  • Arkhe
  • 知識ブログ一覧
OutPut
  • HOME
  • Arkhe
  • 知識ブログ一覧
  1. ホーム
  2. 知識ブログ
  3. CSS
  4. CSSのcounter-incrementを使って簡単に自動で連番をつける方法

CSSのcounter-incrementを使って簡単に自動で連番をつける方法

2024 3/30
CSS
2024年3月30日

連番を動的に付けたいけど、どうやったら付けれるかを知りたい!

いくつか方法はありますが、今回は非常に便利なCSSプロパティであるcounter-incrementを紹介します。

目次

counter-increment?counter-reset?って何?

counter-increment とcounter-resetについて解説していきます!

counter-incrementについて

counter-increment は、CSSのプロパティの一つであり、カウンター(counter)を操作するために使用されます。カウンターは、文書内の特定の要素の数を追跡するために使用されます。このプロパティは、::before や ::after などの疑似要素に対して適用され、カウンターの値をインクリメント(増加)させるために使用されます。

counter-increment プロパティは、次のような形式で使用されます:

counter-increment: counter-name value;
  • counter-name: 増加したいカウンターの名前を指定します。カウンターは counter() 関数で参照されます。
  • value: カウンターの値を増やす量を指定します。デフォルト値は 1 ですが、負の値や正の値を指定することもできます。

counter-resetについて

counter-reset プロパティは、CSSのカウンター(counter)をリセットまたは初期化するために使用されます。このプロパティは、カウンターの値をゼロまたは特定の値にリセットし、それ以降のカウンター値の計算に影響します。

counter-reset プロパティは次のような形式で使用されます:

counter-reset: counter-name value;
  • counter-name: リセットしたいカウンターの名前を指定します。カウンターは counter() 関数で参照されます。
  • value: カウンターの初期値を指定します。デフォルト値は 0 ですが、任意の整数値を指定することができます。

では、実際にどのような使い方をするのかをハンズオン形式でやっていきましょう!

counter-incrementで実際にカウントを増やしてみよう

今回は、5, 6, 7と増やすcounterを作ってみようと思います。

今回の仕様
  • 5からカウントされること
  • カウントは1ずつ増やしていくこと
  • カウントの後にドットを入れること

コピペしたい方に、先に答えを載せておきます!

<div class="counter-parent">
 <p class="counter-child">counter-parentの子要素(1番目)</p>
 <p class="counter-child">counter-parentの子要素(2番目)</p>
 <p class="counter-child">counter-parentの子要素(3番目)</p>
</div>
.counter-parent {
 counter-reset: number 4; /* 名前は任意(今回はnumber)、0でリセット(0は初期値)。*/
}
.counter-child::before {
 counter-increment: number 1; /* counter-resetの名前を指定、+1づつ増やす。*/
 content: counter(number) "."; /* 番号の後に、ドットを付ける場合に指定する。*/
 padding-right: 8px; /* ドットと文字に、間隔を空ける場合に指定する。*/
}

では、順番にやり方を見ていきましょう!

counter-incrementを使って、5, 6, 7とカウントを増やす手順
  • カウントを増やしたい子要素にcounter-increment: number 1;を設定する
  • 親要素にcounter-reset: number 4; を設定する
  • カウントを増やしたい子要素にcontent: counter(number) "."; を設定する。

① カウントを増やしたい子要素にcounter-increment: number 1;を設定する

今回は、numberという名前を付けましたが、ここは任意なので、他の名前に変えてもらっても構いません。

5, 6, 7と増やす、つまり1ずつ増やしたいので、1を設定します。

② 親要素にcounter-reset: number 4; を設定する

なぜ、4を設定するかというと、今回5からスタートして1ずつ増やしたいので、4で初期化することで、4+1で5スタートになるわけです。

ここの数字は、-1のようにマイナスの値を取ることも可能です。

③ カウントを増やしたい子要素にcontent: counter(number) "."; を設定する。

この書き方をすることで、counterの後にドットを入れることができます。

ドット以外にも任意の文字列を入れることもできますよ。

See the Pen counter-incrementについて by レメ (@grozxntv-the-sasster) on CodePen.

CSS
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • CSSのgridを使って、アイコン付きのボタンを作ってみる【活用法】

この記事を書いた人

remeのアバター reme

ブログ「OutPut」の運営者。私自身がインプット→アウトプットの場として作成しました。また、それをあなたがインプット→アウトプットする機会になれれば嬉しいと思い、この名前にしました。
【シンプルでわかりやすい】を心がけて記事を書いています!

関連記事

  • CSSのgridを使って、アイコン付きのボタンを作ってみる【活用法】
    CSSのgridを使って、アイコン付きのボタンを作ってみる【活用法】
    2024年4月6日
  • JavaScriptのDOM操作について詳しくまとめる【メモ】
    2024年4月13日
  • 【JavaScript】目次をセクションの見出しから自動生成する機能を作成してみた
    2024年4月18日

コメント

コメントする コメントをキャンセル

カテゴリー
  • HOME
  • Arkhe
  • 知識ブログ一覧

© OutPut.

目次