`css counter`で自動採番・ゼロパディングした要素の作り方

表題のことをやりたくなったのでサクッと書いてみました。

デモページの表示(css counter)
デモページの表示(css counter)

コードの各所についてもう少し詳細に見ていきます。

HTML(ejs)

HTMLとして以下のようなコードを書いておきます。サンプルだとejsですが、今回のメインテーマに係る部分でejs的な要素がないので素のHTMLでも同じです。

<div class="o-flowchat l-flowchat">
    <div class="o-flowchat_container l-flowchat_container">
        <div class="o-flowchart_text">
            <p>First, roll the salmon in rice.</p>
            <p>Then...</p>
        </div>
    </div>
    <div class="o-flowchat_container l-flowchat_container">
        <div class="o-flowchart_text">
            <p>Holy s***, you ruined everything.</p>
            <p>Like everything you do</p>
        </div>
    </div>
    <div class="o-flowchat_container l-flowchat_container">
        <div class="o-flowchart_text">
            <p>This sushi like your life</p>
        </div>
    </div>
    <div class="o-flowchat_container l-flowchat_container">
        <div class="o-flowchart_text">
            <p>Beginning a lot of things, left undone</p>
        </div>
    </div>
    <div class="o-flowchat_container l-flowchat_container">
        <div class="o-flowchart_text">
            <p>And nobody loves you.</p>
        </div>
    </div>
</div>

クラスflowchatの大枠の中に各ステップのflowchat_containerがある、というシンプルな作りです。

css(Scss)

肝はタイトルの通りcss counter。それに関連する部分だけを抽出すると以下のようなコードです。

.o-flowchat {
    counter-reset: number; /* カウンタを`o-flowchat`ごとにリセット */
    &_container {
        &::before {
            /* 番号のデザイン(略) */
            counter-increment: number; /* 採番のインクリメント */
            content: counter(number, decimal-leading-zero); /* brefore疑似要素に番号を自動採番で挿入。`decimal-leading-zero`でゼロパディングも実施 */
        }
    }
}

コメントに書いてある通りですが、

  • counter-resetで採番をリセット(0に戻)す
  • before疑似要素のcontentに挿入する部分でcounter-incrementしてカウントアップする
  • counter(number)で番号を出力する

だけです。ゼロパディングはcounter()の第二引数にdecimal-leading-zeroを指定することで実現しています。

シンプルですが、「第X章」のように前後に文字を挟む場合や、オリジナルのolの番号を作るなど応用がそこそこ効きそうなので、ストックしておきます。

参考

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。