今回はCSSでサクッとカウンターを作る方法を紹介します。<ol>は使いません。
慣れると20秒くらいで作れるようになります。かゆいところにも手が届く便利な機能なのでぜひ試してみてくださいな。
特徴はこんな感じ↓
- CSSだけでカウンターが作れる
- 要素が離れていても使える
- ::before, ::after擬似要素に適用できる
では早速作っていきましょう。
完成予想図
とりあえず今回はこんな感じでカウンターを作ってみます↓
カウントはおそらく無限にできると思います。
ちなみに↑のHTML構造はこちら。簡単に頭の中に入れておいてください。
<div class="wrapper">
<div class="item">
<span class="order"></span>
<p>【CSSだけ】counterを使ってサクッとカウンターを作る方法</p>
</div>
<div class="item">
<span class="order"></span>
<p>【CSSだけ】counterを使ってサクッとカウンターを作る方法</p>
</div>
<!-- 以下同じ -->
</div><span class="order"></span>という空の要素を配置しています。これがカウンターとなります。
また、<div class="wrapper">が全ての親要素で、<div class="item">が各々の中身になります。
カウンターの作り方
作り方はそこまで難しくありません。最初の頃は多少戸惑うかもしれないですが、頑張りましょう。
カウンターのリセット
全てのカウンターを含む親要素にcounter-reset: 任意の名前;を指定します。
「任意の名前」には自分で好きな名前を決めることができます。今回は「ranking」という名前にします。
全ての要素を含む親要素は<div class="wrapper">なので、これにcounter-reset: ranking;を指定します。
.wrapper {
counter-reset: ranking;
}
カウンターの適用/増加
カウンターは::beforeや::after擬似要素のcontentとして指定します。
カウンターにしたい要素にcontent: counter(ranking);を指定しましょう。
contentには普通シングルクオーテーション「’ ‘」を指定しますが、カウンターの場合は不要です。シングルクオーテーションをつけてしまうと正しく動作しないので気をつけてください。
同時にcounter-increment: ranking;を指定します。
counter-incrementはカウンターの値を1ずつ増やすプロパティです。
これでカウントが1ずつ増えていくわけです。
.order::before {
content: counter(ranking);
counter-increment: ranking;
}
最終的にカウンター部分のCSSだけを抜粋すると以下のようになります。
.wrapper {
counter-reset: ranking;
}
.order::before {
content: counter(ranking);
counter-increment: ranking;
}
カウンターを作る手順を簡単にまとめるとこんな感じ。
1：全てのカウンターを含む要素に
counter-reset: 任意の名前;
を指定（今回なら<div class=”wrapper”>）
2：カウンターにしたい要素の擬似要素に
content: counter(任意の名前);counter-increment: 任意の名前;
を指定
counter以外にもかゆい所に手が届くプロパティはたくさんあります。
そういったプロパティや、ちょっとひねったおしゃれな使い方は以下の本がとても参考になりました。CSSをレベルアップさせたい人は必読です。
うまくいかない場合は…？
カウンターに記述ミスがないか、適用する場所は正しいか確認してください。
正しいのにうまくいかない場合は、大体擬似要素のdisplayの指定がおかしいとか、背景と文字色が同化していて見えていないだけみたいな理由です。
contentにcounter(ranking);ではなく試しに文字を入れてみるとか、background-colorを指定して存在をわかりやすくすると対処しやすいと思います。
counter関連が原因じゃない場合は大体擬似要素の表示がおかしいだけですね。
まとめ
なんだかんだ言ってカウンターはちらほら使う時があると思います。
自動で連番を振ってくれるし、CSSだけでできるのでいざという時に結構役立ちます。
counterは使えるようにしておいて損はないでしょう。
