counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
Contents - 目次
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」の実装例。
実装例 1
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; /* ドットと文字に、間隔を空ける場合に指定する。*/
}
実際の表示。
上記のコードで、以下の「テキスト」の文字に自動的に連番、ナンバリングがされるようになる。
テキスト
テキスト
テキスト
定型文のような感じなので、使い回しがきく。
実装例 2
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のフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。