概要
CSSのcounter-resetプロパティは、カウンターの値をリセットし、指定したカウンターを新たに初期化するために使用されます。カウンターは、リストや段落、セクションごとに自動的に番号を付けたり、ページ内でカスタム番号を生成する際に役立つ機能です。このプロパティを使うことで、ページ内のカウンターを任意のタイミングでリセットして、柔軟に番号を振り直すことができます。
基本的な構文
selector {
counter-reset: counter-name [initial-value];
}
counter-nameはリセットしたいカウンターの名前です。initial-valueはリセット後にカウンターが開始する数値で、省略するとデフォルトで0になります。
例 - シンプルなカウンターのリセット
以下は、カスタムカウンターを作成し、段落に自動で番号を付ける例です。段落ごとに番号が振られ、counter-resetを使ってカウンターをリセットしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
counter-reset: section; /* カウンターをリセット */
}
p::before {
counter-increment: section; /* カウンターを1増加 */
content: "セクション " counter(section) ". "; /* カウンターの値を表示 */
}
</style>
<title>Counter Resetの例</title>
</head>
<body>
<p>最初の段落です。</p>
<p>2番目の段落です。</p>
</body>
</html>
説明
counter-resetプロパティをbodyに適用し、sectionというカウンターを初期化しています。各段落ではcounter-incrementを使ってカウンターを1ずつ増加させ、::before疑似要素でカウンターの値を表示しています。このコードによって、各段落の前に「セクション 1.」「セクション 2.」と番号が付けられます。
複数のカウンターをリセットする
counter-resetでは複数のカウンターを同時にリセットすることができます。例えば、メインセクションとサブセクションのカウンターをリセットする場合の例を見てみましょう。
selector {
counter-reset: main-section 1 sub-section 0;
}
例 - メインとサブのカウンターのリセット
次に、メインの章とサブセクションごとに番号を付ける例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
counter-reset: main-section; /* メインセクションのカウンターをリセット */
}
h1 {
counter-reset: sub-section; /* 各章ごとにサブセクションのカウンターをリセット */
}
h1::before {
counter-increment: main-section; /* メインセクションのカウンターを増加 */
content: "章 " counter(main-section) ". ";
}
h2::before {
counter-increment: sub-section; /* サブセクションのカウンターを増加 */
content: counter(main-section) "-" counter(sub-section) ". ";
}
</style>
<title>メインとサブのカウンターリセットの例</title>
</head>
<body>
<h1>第1章</h1>
<h2>セクション1-1</h2>
<h2>セクション1-2</h2>
<h1>第2章</h1>
<h2>セクション2-1</h2>
</body>
</html>
説明
この例では、main-sectionというカウンターがbodyでリセットされ、各h1タグでsub-sectionがリセットされています。これにより、メインの章ごとにサブセクションのカウントがリセットされ、番号が「1-1」「1-2」「2-1」という形式で表示されます。
カウンターを特定の値から開始する
カウンターは、単にリセットするだけでなく、特定の数値から開始することも可能です。たとえば、以下のようにcounter-resetでカウンターを3から開始できます。
selector {
counter-reset: section 3;
}
例 - 特定の値からカウンターを開始
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
counter-reset: section 3; /* カウンターを3から開始 */
}
p::before {
counter-increment: section;
content: "セクション " counter(section) ". ";
}
</style>
<title>カウンターの値を変更する例</title>
</head>
<body>
<p>この段落は4番目になります。</p>
<p>この段落は5番目です。</p>
</body>
</html>
説明
この例では、counter-resetを使ってカウンターを3からスタートさせています。そのため、最初の段落は「セクション 4.」として表示されます。カウンターをリセットする際に、任意の数値を指定できるため、特定の順序で番号を付けたい場合に便利です。
応用例 - 複雑なカウンター管理
counter-resetは、複雑なカウンター管理にも活用できます。たとえば、FAQ形式で質問ごとに番号を自動的に付ける場合の例を紹介します。
FAQ形式でのカウンターの利用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.faq {
counter-reset: question; /* FAQの質問ごとにカウンターをリセット */
}
.faq-item::before {
counter-increment: question; /* カウンターを増加 */
content: "質問 " counter(question) ": "; /* カウンターの値を表示 */
font-weight: bold;
}
</style>
<title>FAQカウンターの例</title>
</head>
<body>
<div class="faq">
<div class="faq-item">このプロパティの使い方は？</div>
<div class="faq-item">カウンターをリセットする方法は？</div>
<div class="faq-item">他のプロパティと組み合わせて使えますか？</div>
</div>
</body>
</html>
説明
この例では、counter-resetでquestion というカウンターを作り、各faq-itemに対して自動的に質問番号が付けられています。これにより、FAQリスト内で「質問 1:」「質問 2:」のように番号を自動生成することができます。
まとめ
counter-resetプロパティは、カウンターの値を初期化し、特定の要素内で新たなカウントを開始するために非常に便利です。カウンターは順序付きリストやカスタムナンバリングなど、さまざまな用途に活用でき、counter-incrementと組み合わせることで、さらに高度なカスタムカウンターを実現できます。