• #HTML・CSS・JavaScript

【JavaScript不要】CSSだけで連番を振る方法

見出しやリスト要素などにCSSだけで連番を振ることができます。JavaScriptは使いません。
カスタマイズ性も高いので、

第1位：コウテイペンギン
第2位：オオサマペンギン
第3位：ジェンツーペンギン

や、

A：コウテイペンギン
B：オオサマペンギン
C：ジェンツーペンギン

といった自由な表記を行うことができます。

豊かに引きこもる。

Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。

基本の使い方

今回ご紹介する方法では、擬似要素（before / after要素）を使って連番を表示させます。
必要な設定は以下の2つ。

・counter-incrementプロパティで、連番のカウンター名をセットする。
・before / after要素で、連番を表示する。

サンプル
以下は、li要素にbefore要素で連番（1、２、3）を表示させた例です。

・カウンター名は「count」という名前にしています。
・countの値は、counter関数を使って表示させます。

見慣れない表記ですが「こういう書き方なんだな」と飲み込んでしまえば大丈夫です。

/* カウンター名を「count」に */
li {
  counter-increment: count;
}

/* 擬似要素で連番を表示 */
li::before {
  content: counter(count);
}

<ul>
  <li>コウテイペンギン</li>
  <li>オオサマペンギン</li>
  <li>ジェンツーペンギン</li>
</ul>

「counter-increment」の「increment」には、「値を1つ足す」という意味があります。
「count」の値が1つずつ増えることによって、連番が表示される、という仕組みです。

バリエーション

マーカーを変更する

連番のマーカー（1、2、3…）を別の表記にすることもできます。

サンプル
以下は、マーカーの値を大文字のアルファベット（upper-alpha）にした例です。
カウンター名の後に、カンマ区切りで表示方法を定義します。

li {
  counter-increment: count;
}

/* マーカーを大文字のアルファベット（upper-alpha）に */
li::before {
  content: counter(count, upper-alpha);
}

表示方法の種類はたくさんあるのですが、例えばこんなのがあります。

テキストの追加

マーカーの前後にテキストを足すこともできます。

サンプル
以下は、「位：」のテキストを追加して、「1位：」「2位：」とした例です。

li {
  counter-increment: count;
}

/* マーカーの表記を「1位：」「2位：」に */
li::before {
  content: counter(count) "位：";
}

数字を飛ばす

counter-incrementプロパティの初期設定は「1つずつ値を増やす」ですが、その数は自由に変えることができます。

サンプル
以下は、カウンターを「2、4、6」と2つずつ増加させた例です。
counter-incrementプロパティのカウンター名の後に、増やしたい数を追加表記して実装します。

li {
  /* カウンター名(count) + 半角スペース + 増加数(2) */
  counter-increment: count 2;
}

li::before {
  content: counter(count) "：";
}

値をリセットする

counter-resetプロパティを使うと、途中からカウンターの値をリセットさせることもできます。

サンプル
以下は、リストの4番目でカウンターをリセットした例です。

li {
  counter-increment: count;
}

li::before {
  content: counter(count) "：";
}

/* ここでカウンターをリセット */
li:nth-child(4) {
  counter-reset: count;
}

カウンターの初期値を設定

counter-setプロパティを使うと、カウンターの初期値を自由に設定することができます。
例えばページを跨いで何かのランキングを掲載する場合などに便利です。

・1ページ目：1位〜5位を紹介
・2ページ目：6位〜10位を紹介（カウンターの初期値を6に設定）
・3ページ目：11位〜15位を紹介（カウンターの初期値を11に設定）

現状、Safariでは機能しないので、今後の対応を待ちたいですね。

サンプル
以下は、カウンターの初期値を100にした例です。（Safariでは正しく表示されません）

li {
  counter-increment: count;
}

li::before {
  content: counter(count) "：";
}

/* カウンター名(count) + 半角スペース + 初期値(100) */
li:first-child::before {
  counter-set: count 100;
}

先程ご紹介したcounter-incrementプロパティを組み合わせて、10位からカウントダウン（10位、9位、8位…）させるような事もできます。
（Safariでは機能しません）

li {
  /* -1を指定して、カウンターを1つずつ減らす */
  counter-increment: count -1;
}

li::before {
  content: counter(count) "位：";
}

li:first-child::before {
  /* カウンターは10からスタート */
  counter-set: count 10;
}

ネスト構造（入れ子）

counter関数の代わりにcounters関数を使うと、こんな感じでネスト構造でのナンバリングを行ってくれます。

上記のHTMLはこのような状態。ul要素をネストにしています。

<ul>
  <li>コウテイペンギン
    <ul>
      <li>大きさ</li>
      <li>特徴</li>
      <li>住んでいる地域</li>
    </ul>
  </li>
  <li>オオサマペンギン
    <ul>
      <li>大きさ</li>
      <li>特徴</li>
      <li>住んでいる地域</li>
    </ul>
  </li>
  <li>ジェンツーペンギン
    <ul>
      <li>大きさ</li>
      <li>特徴</li>
      <li>住んでいる地域</li>
    </ul>
  </li>
</ul>

CSSはこのように実装しています。

ul {
  counter-reset: count;
}

li {
  counter-increment: count;
}

li::before {
  /* カウンター名(count)、区切り用のテキスト（.）、表示の方法（decimal） */
  content: counters(count, ".", decimal) "：";
}

counters関数の中に、カンマ区切りで3つの設定が入っています。

1.カウンター名：count
2.区切り用のテキスト：.（「1.4」のようにドットで区切る）
3.表示の方法：数字（decimal）→大文字アルファベット(upper-alpha)などに変更OK

何が便利？

カウンター設定を使うとこんなメリットがあります。

正確、かつ楽に編集できる

数値をHTML上にベタ書きした場合、

<ul>
  <li>第1章：コウテイペンギン</li>
  <li>第2章：オオサマペンギン</li>
  <li>第3章：ジェンツーペンギン</li>
  <li>第4章：アデリーペンギン</li>
</ul>

「コウテイペンギンを第3章に移動」なんて作業が発生するたびにイチイチ番号を振り直さなくてはいけないのが面倒です。
最後に紹介したネスト構造なんて、特に煩雑な作業ですよね。
counter-incrementプロパティを使えば、早く正確に採番を行うことができます。

JavaScript不要

ご紹介した通りCSSだけで実装できるので、JavaScriptに親しんでいなくても簡単に利用できます。
JavaScriptを使わない分、動作も多少軽くなる？かもしれません。

書式設定が自由

こちらもご紹介した通り、「1位」や「第2章」等、より柔軟な表現ができるのも大きな魅力です。

マーカーのデザイン設定も自由

マーカーといえば思い出すのがol要素などで見られるデフォルト表示ですが、

こちらは色やサイズのカスタマイズができないですよね。
counter-incrementプロパティを利用すれば、自分の好きなデザインに変更することができます。

まとめ

CSSによるカウンター作成まとめ

• カウンターのセット：counter-incrementプロパティで行う
• カウンターの表示：counter関数/counters関数を利用して、擬似要素(before/after)で行う
• 利用するメリット：ミスなく楽に編集可能。書式やデザインの自由度が高い

制作作業において、可能なトコロはとにかく自動化！
そうすれば、デザインを考える時間をたっぷり取ることができます。

1. Home
2. 【JavaScript不要】CSSだけで連番を振る方法