Jump to the content

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

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なども出来ます。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×