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

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

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

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

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

最初の使い方には少し注意や慣れが必要かもしれないが、いちど覚えると何かと便利な機能、思考となる。

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

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

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

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

また、プログラミングの場合は「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; /* ドットと文字に、間隔を空ける場合に指定する。*/
}

表示

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

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

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;
}

表示

レーン

–

レーン

るいす

レーン

ぼると

レーン

やこぶす

レーン

すー

レーン

やまがた

レーン

…

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

W3schools： CSS counter-increment property

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

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