知っておくと便利!CSSだけで自動カウントする方法【CSSカウンタ】

CSS

知っておくと便利!CSSだけで自動カウントする方法【CSSカウンタ】

2019年09月03日 8:00 

知っておくと便利!CSSだけで自動カウントする方法【CSSカウンタ】

おはようございます!社員Aです👩

今回は、CSSだけで自動カウント(CSSカウンタ)する方法をご紹介したいと思います。

「自動カウントはjsでしかできないのでは‥?」と思われるかもしれませんが、CSSでも簡単にできますのでこの機会にぜひ覚えてみましょう!



 

CSSの自動カウンタ(CSSカウンタ)ってなに?

そもそもCSSカウンタってなに?と思われるかもしれませんので、ご説明します!(笑)

CSS カウンターは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。

例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。

カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。

引用:https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters

つまり、CSSだけを使って自動的に見出し番号を振ったりすることのできる機能です。

 



CSSセレクタ基本のルール

  1. 親要素に「counter-reset: xxx;」を指定。(xxxの部分は任意)
  2. 自動カウントしたい要素に「counter-increment:xxx」「content: counter(xxx);」を指定。

実際に上記ルールを適用してみました。

HTML
 

CSS
 

表示

h1の疑似要素「:before」を使って簡単に見出しの前に自動カウントできました。

見出しではなくても、リストなどでも応用できそうです。

わざわざ数を数えながら入れ込みをする手間も減りますし、要素を入れ替えても番号順になるのでとても便利です!

 

自動カウントの開始する数を変更する

自動カウントの開始する数や、間隔も変更ができます。

例えば下記のようなシーンです。

  • 5からカウントを始めたい
  • 2ずつ飛ばしてカウントさせたい

HTMLは先程と同様のまま、CSSだけ変更します。

CSS
.box要素に指定している「counter-reset」に、「num」と初期値である「5」を指定します。

そして、ナンバリングしたい要素には「counter-increment」に、「num」と飛ばしてカウントしたい「2」を指定します。

 

表示

このカスタマイズでナンバリングの幅がぐっと広がりました。様々な用途に合わせて使えそうです。

 



数字以外にも漢数字や白丸なども指定できる

CSSカウンタのデフォルトは数字ですが、こちらも指定することにより漢数字や白丸などに変更ができます。

CSS
「content」部分に、カンマで区切りを入れて指定します。

下記表にあるプロパティをいれていただくと、変更できます。

armenian アルメニア数字
circle 白丸
cjk-ideographic 漢数字
decimal 算用数字
decimal-leading-zero 先頭に0をつけた算用数字
georgian グルジア数字
hebrew ヘブライ数字
hiragana ひらがな(50音順)
hiragana-iroha ひらがな(いろは順)
inherit listStyleType
katakana カタカナ(50音順)
katakana-iroha カタカナ(いろは順)
lower-alpha 小文字のアルファベット
lower-greek 小文字のギリシャ文字
lower-latin 小文字のアルファベット
lower-roman 小文字のローマ数字
upper-alpha 大文字のアルファベット
upper-latin 大文字のアルファベット
upper-roman 大文字のローマ数字

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!