JS不要!CSSでカウント数字のゼロ埋め(ゼロパディング)を実装する

どうも、イソップです。

CSSの「counter-increment」というプロパティをご存知でしょうか。
JavaScriptを使わなくても、CSSだけでカウント表示ができるプロパティです。

今日はcounter-incrementを応用した、カウント数字のゼロ埋め(ゼロパディング)の方法を詳解します。

counter-incrementとcontentプロパティを上手く使います

まずはデモを見てみましょう。見出しのh2タグにカウント数字を表示します。

See the Pen oYywrK by Youhei Isokawa (@yuhiisk) on CodePen.

できとるやんけ!
では早速詳しく見てみましょう。

HTMLは見出しと段落が続く、よくありそうな構造にしてます。

<div class="content">
  <h2 class="heading"></h2>
  <p>paragraph</p>
  <h2 class="heading"></h2>
  <p>paragraph</p>
  <h2 class="heading"></h2>
  <p>paragraph</p>
  <h2 class="heading"></h2>
  <p>paragraph</p>
  ...
</div>

次にCSSです。

h2.heading {
  counter-increment: heading;
}
/* ゼロを頭につける */
h2.heading:after {
  content: '0' counter(heading);
}
/* 10以上はゼロを取る */
h2.heading:nth-of-type(9) ~ h2:after {
  content: counter(heading);
}
/* 最後だけ文字を変える */
h2.heading:last-of-type:after {
  content: 'finish!' !important;
}
  1. counter-incrementにキーワードを指定します。
  2. :after疑似要素のcontentプロパティに、'0'を追加します。
  3. h2タグが10個以上あったら、contentプロパティの'0'を取り除いて再定義します。
  4. 最後だけ文字を変えたい場合は、:last-of-typeセレクタが便利です。

実に簡単ですね。

今回は1〜9に0を付けましたが、応用すれば001〜099なども出来ます。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.