counter-increment vs JavaScript：連番・カウントアップの最適解は？

CSS Miscellaneous: counter-increment を使って連番やカウントアップを実現

仕組み

• カウンターは名前付きの変数のようなもので、各要素に個別に値を割り当てることができます。
• counter-increment を使って、要素ごとにカウンターの値を増加させます。
• カウンターの値は、content プロパティを使ってコンテンツとして表示することができます。

基本的な使い方

1. カウンターの名前を定義します。
2. カウンターの初期値を設定します。
3. 要素に counter-increment プロパティを適用し、増加する値を指定します。
4. カウンターの値を表示したい要素に、content プロパティを使ってカウンターの名前を指定します。

例

<ol>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

ol {
  counter-reset: item 1; /* カウンターの名前と初期値を定義 */
}

li {
  counter-increment: item; /* カウンターを1ずつ増加 */
}

li::before {
  content: "項目" counter(item) " "; /* カウンターの値を表示 */
}

結果

項目1
項目2
項目3

応用例

• 見出しに連番をつける
• リスト項目に連番をつける
• ページビューのカウント
• 投票数の表示

補足

• counter-increment は、要素ごとに個別にカウンターを管理します。
• カウンターの値は、セッション中に保持されます。
• カウンターの値をリセットするには、counter-reset プロパティを使用します。

• counter-increment は、複雑なカウントアップ処理にも使用できます。
• 詳細については、上記の参考資料を参照してください。

いろいろなサンプルコード

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

h1, h2, h3 {
  counter-reset: section; /* 各見出しレベルでカウンターをリセット */
}

h1::before {
  content: "第" counter(section) "章 ";
}

h2::before {
  content: counter(section, upper-roman) ". ";
}

h3::before {
  content: counter(section, lower-alpha) ". ";
}

結果

第1章 見出し1
第1章.1 見出し2
第1章.1.1 見出し3

リスト項目に連番をつける

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

ul {
  list-style: none;
  counter-reset: item; /* カウンターの名前と初期値を定義 */
}

li {
  counter-increment: item; /* カウンターを1ずつ増加 */
}

li::before {
  content: counter(item, disc) " "; /* カウンターの値を表示 */
}

結果

● 項目1 ● 項目2 ● 項目3

ページビューのカウント

<p id="page-view">ページビュー: 0</p>

#page-view {
  counter-reset: page-view 0; /* カウンターの名前と初期値を定義 */
}

#page-view::after {
  content: " (" counter(page-view) ") "; /* カウンターの値を表示 */
}

/* JavaScript */
function incrementPageView() {
  const pageViewElement = document.getElementById("page-view");
  const counter = parseInt(pageViewElement.textContent.match(/\d+/)[0]);
  pageViewElement.textContent = `ページビュー: ${counter + 1}`;
}

// ページ読み込み時にカウンターを1増加
incrementPageView();

// ページ閲覧のたびにカウンターを1増加
window.addEventListener("scroll", incrementPageView);

結果

ページビュー: 1 (2)

投票数の表示

<button id="vote-button">投票する</button>
<p id="vote-count">投票数: 0</p>

#vote-count {
  counter-reset: vote-count 0; /* カウンターの名前と初期値を定義 */
}

#vote-count::after {
  content: " (" counter(vote-count) ") "; /* カウンターの値を表示 */
}

/* JavaScript */
const voteButton = document.getElementById("vote-button");
const voteCountElement = document.getElementById("vote-count");

voteButton.addEventListener("click", () => {
  const counter = parseInt(voteCountElement.textContent.match(/\d+/)[0]);
  voteCountElement.textContent = `投票数: ${counter + 1}`;
});

結果

投票数: 0 (1)

counter-increment 以外の方法

JavaScript を使って、要素ごとに連番やカウントアップを制御することができます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

const listItems = document.querySelectorAll("ul li");

for (let i = 0; i < listItems.length; i++) {
  listItems[i].textContent = `${i + 1}. ${listItems[i].textContent}`;
}

結果

1. 項目1
2. 項目2
3. 項目3

サーバサイドで連番やカウントアップ処理を行い、HTML に反映する方法もあります。

<?php
$items = ["項目1", "項目2", "項目3"];

for ($i = 0; $i < count($items); $i++) {
  echo "<li>" . ($i + 1) . ". " . $items[$i] . "</li>";
}
?>

結果

画像を使う

連番やカウントアップを表す画像を用意し、HTML に表示する方法もあります。

<ul>
  <li><img src="images/1.png" alt="1"></li>
  <li><img src="images/2.png" alt="2"></li>
  <li><img src="images/3.png" alt="3"></li>
</ul>

CSS counters の代替ライブラリ

count-up.js などの CSS counters の代替ライブラリを使用する方法もあります。

それぞれの方法のメリットとデメリット