counter-incrementの使い方。CSSで連番。増えない時の対処。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

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

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

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

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

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

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

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


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

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

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

また、プログラミングの場合は「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のドットや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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

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

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。