counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。デザイナー、コーチ、ディレクター / いがわ

.

Memo

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

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; /* ドットと文字に、間隔を空ける場合に指定する。*/
}
実際の表示。

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

テキスト

テキスト

テキスト

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

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

実装例 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;
}
実際の表示。
レーン
レーン
るいす
レーン
ぼると
レーン
やこぶす
レーン
すー
レーン
やまがた
レーン

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

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

W3schools: CSS counter-increment property

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


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

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。