BLOGブログ

CSSでcounterを利用したナンバーを自動出力する方法

2021.05.13

Web制作・ホームページ制作

CSSの「counter(カウンタ)」を使用すると連番などが自動で出力できる機能を実装することができます。

「1」「2」「3」のような基本的なものはもちろん、「1.1」「1.2」「1.3」「2.1」のような章や節を表すことができたり、「第1位」「第2位」「第3位」という書き出しを付けることができます。

それでは、さっそくサンプルを使いながら実装方法をまとめていきます。

基本的な使い方

CSSの「counter(カウンタ)」はカウンターを表示したいセレクタに擬似要素のbeforeかafterを使用します。beforeならcounterを指定した要素の先頭に番号や文字列の表示ができ、afterなら要素の後ろに表示できます。

「counter(カウンタ)」を使用するするときには、以下のプロパティが必要になります。

body{
  counter-reset: number 0;
}

h1::before{
  counter-increment: number 1;
  content: counter(number) " ";
}
プロパティ内容説明
counter-resetカウントする値を初期化をします。
counter-incrementカウント増加数の設定になります。
※ 1を設定すれば、1づつ増加します。
content表示形式の指定です。

See the Pen css_counter1 by Jun Yamagami (@Jun-Yamagami) on CodePen.

 

文字の前に自動的に数字がカウントされたことがわかってもらえると思います。

文字を含んだ書き方

英数字をはじめ、漢数字などを指定することができ、counterと合わせてさまざまな形にすることができます。

body{
  counter-reset: number 0;
}

h1::before{
  counter-increment: number 1;
  content: "第" counter(number) "位";
}

See the Pen css_counter2 by Jun Yamagami (@Jun-Yamagami) on CodePen.

counter()の前後に文字を入れるだけで、表示できるのでとても簡単です。

アルファベット・ひらがな・漢数字などを使ったカウンター

「content: counter(number,〇〇) " ";」〇〇の部分を以下の値を設定するとさまざまなカウンター文字になります。

プロパティ値

内容説明(表示説明)
armenianアルメニア数字
circle白丸
cjk-ideographic漢数字
decimal算用数字 (olデフォルト値)
decimal-leading-zero先頭に0をつけた算用数字 (01, 02, 03, 等)
georgianグルジア数字
hebrewヘブライ数字
hiraganaひらがな – あいうえお順
hiragana-irohaひらがな – いろは順
inheritistStyleType プロパティの値は親要素から継承することを指定する
katakanaカタカナ – アイウエオ順
katakana-irohaカタカナ – イロハ順
lower-alpha小文字のアルファベット (a, b, c, d, e 等)
lower-greek小文字のギリシャ文字
lower-latin小文字のアルファベット (a, b, c, d, e 等)
lower-romanT小文字のローマ数字( i, ii, iii, iv, v 等)
upper-alpha大文字のアルファベット (A, B, C, D, E 等)
upper-latin大文字のアルファベット (A, B, C, D, E 等)
upper-roman大文字のローマ数字 (I, II, III, IV, V 等)

See the Pen css_counter by Jun Yamagami (@Jun-Yamagami) on CodePen.

いろんな種類があって、使い方によってはとても良いCSSです。

入れ子タイプのナンバーリンク

「ol」「li」を使った入れ子の場合、「1.1.」「1.2.」「1.3.」「2.1.」のような形式でナンバリングをすることができます。

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

See the Pen css_counter3 by Jun Yamagami (@Jun-Yamagami) on CodePen.

「ol」「li」を使った入れ子の場合でも、簡単にやることができます。

まとめ

CSSの「counter(カウンタ)」を使用すれば簡単に連番を自動で付けることができます。

とても便利ですし、カウンターの種類もたくさんあるので、counterの使い方の理解と共に使用してみると良いと思います。ぜひ一度、お試し下さい。