CSSカウンター(自動採番)

このレッスンでは、CSSカウンターを使った自動採番の仕組みを学び、標準のリストだけでは難しい独自の連番表現を作れるようになることを目標にします。「CSS counter 使い方」で調べている方向けです。

counter-resetとcounter-incrementを使うと、番号付きリストのような「自動で増える番号」をCSSだけで実現できます。content: counter(名前)で数字を表示します。

サンプルコードでは、ol.customにcounter-reset: step;でカウンターを初期化し、各liにcounter-increment: step;で1ずつ増やしながら、::before疑似要素で「STEP 1」のような文字列を表示しています。標準の<ol>の番号はlist-style: none;で非表示にしている点にも注目してみましょう。

初心者がよくつまずくのが、counter-resetとcounter-incrementの役割の違いです。resetはカウンターを「0から数え始める」という初期化の指定で、incrementは各項目で「1つ増やす」という指定です。この2つがセットで機能します。

「STEP 1」「STEP 2」のような文字列を含む連番や、独自のデザインを施した番号表示など、標準の<ol>だけでは難しい表現もカウンターを使えば自由に組み立てられます。