counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。 / メモ / いがわ

counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。

2022.11.22 2022.11.30更新。

Contents - 目次

1 CSSだけで連番を振ってくれる、counter-increment。
2 使い方。counter-resetでリセットの指定をする。
3 「counter-increment」の実装例。
4 CSS 関連メモ。

CSSだけで連番を振ってくれる、counter-increment。

counter-increment

CSSのプログラムでナンバリング。

CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。

自動連番、ナンバリングもCSSオンリーで可能となっている。

自動でナンバリング。

番号を振ってくれる「counter-increment」プロパティに、「custom-ident（名前）」と「integer（整数値）」を指定すると自動的にナンバリングされる。

「custom-ident」と「integer」は、「counter-increment」プロパティで一括指定が可能。

少し慣れが必要かもしれないけれど、いちど覚えると何かと便利な機能となる。

コード自体もコピペで使い回しができる。

使い方。counter-resetでリセットの指定をする。

counter-reset

カウンターをリセットする。

上手く使うためには、親要素に「counter-reset」プロパティを指定して、まず「カウンターをリセットする」という概念を覚えると良い。

リセットをしなければ、表示がされなかったり、意図しない箇所に自動的に数字がincrement（インクリメント、増加）してしまう原因となってしまう。

0から数える。

また、プログラミングの場合は「1」からではなく「0」から数えるので、1.2.3.と連番を振りたい場合の初期値は「0」となる。

例）

親要素にcounter-resetを指定し、名前を付けて初期値を設定する。（「0」でリセット。）
子要素に擬似要素（::before or ::after）を付け、counter-incrementでcounter-resetの名前と整数値を指定する。
counter-incrementの値は、「1」なら+1づつ増える。（「-1」なら-1づつ減る。）

「counter-increment」の実装例。

実装例１

divタグの中のpタグに連番を振り、番号の後にドットを付ける場合。

親要素がdiv。（#counter）
子要素がpタグ。

HTML

<div id="counter">
 <p>テキスト</p>
 <p>テキスト</p>
 <p>テキスト</p>
</div><!--counter-->

CSS

※pタグのcontentやpaddingは任意。必須ではない。

#counter {
 counter-reset: number 0; /* 名前は任意、0でリセット。*/
}
#counter p::before {
 counter-increment: number 1; /* counter-resetの名前を指定、+1づつ増やす。*/
 content: counter(number) "."; /* 番号の後に、ドットを付ける場合に指定する。*/
 padding-right: 5px; /* ドットと文字に、間隔を空ける場合に指定する。*/
}

実際の表示。

上記のコードで、以下の「テキスト」の文字に自動的に連番、ナンバリングがされるようになる。

テキスト

CSSで連番。counter-incrementの使い方。

定型文のような感じなので、使い回しがきく。

実装例２

dlタグの中のdtタグに連番を振り、番号の前に「第」、後に「：」を付ける場合。

親要素のdlでカウンターリセット。
子要素のdtに「レーン」の文字列。
子要素のddに選手名。

HTML

<dl id="lane">
 <dt>レーン</dt>
  <dd> - </dd>
 <dt>レーン</dt>
  <dd>るいす</dd>
 <dt>レーン</dt>
  <dd>ぼると</dd>
 <dt>レーン</dt>
  <dd>やこぶす</dd>
 <dt>レーン</dt>
  <dd>すー</dd>
 <dt>レーン</dt>
  <dd>やまがた</dd>
 <dt>レーン</dt>
  <dd>...</dd>
</dl><!--lane-->

CSS

※dtとddのdisplayやmarginは必須ではなく、当サイトのCSSと被るための上書き指定。

#lane {
 counter-reset: number 0;
}
#lane dt::before {
 counter-increment: number 1;
 content: "第"counter(number);
}
#lane dt::after {
 content: "：";
}
#lane dt {
 display: inherit;
 float: left;
 margin: 0;
}
#lane dd {
 display: inherit;
}

実際の表示。

レーン: –
レーン: るいす
レーン: ぼると
レーン: やこぶす
レーン: すー
レーン: やまがた
レーン: …

CSSで連番。counter-incrementの使い方。増えない場合の対処方法。

MDN：counter-increment – CSS: カスケーディングスタイルシート | MDN

W3schools： CSS counter-increment property

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。