counter-reset:CSSカウンターの値を任意の数で初期化する

初期値 none
適用対象 全ての要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

counter-resetプロパティの説明

counter-resetは、CSSカウンターの値を任意の数で初期化します。このプロパティは、新しいカウンターの名前を生成したり、順序つきリスト(<ol>)のナンバリングをリセットできます。

counter-resetで初期化された値を基準に、counter-incrementがカウンターの増加や減少を行います。

CSSカウンターを利用すると、特定の要素に対して自動的に連番を振るナンバリング機能を実装できます。一つのページに複数のセクションや見出しが配置される場合に、手書きで編集することなく番号を管理できます。表現に関する指定も「1-1」「1-2」「1-3」といったものから「第一章」「第二章」「第三章」といったものまで、任意の形式を作成可能です。

counter-resetに指定できる値

<custom-ident>
初期化の対象となるカウンターの名前を指定します。id属性と同じように任意の文字列を使用できます。
<integer>
対象の要素が配置されるごとにカウンターをリセットするための数値です。初期は0になります。
none
カウントの初期化は行いません。この値は、詳細度の低いセレクタで定義されたcounter-resetを上書きするために使用できます。

counter-resetの使い方とサンプル

counter-resetプロパティの構文は以下の通りです。

CSS
/* カウンターを 0 にリセット */
counter-reset: counter-name;

/* カウンターを指定された数値に変更 */
counter-reset: counter-name 5;
counter-reset: counter-name -1;

/* 詳細度の低い規則による値を無効化 */
counter-reset: none;

/* グローバル値 */
counter-reset: inherit;
counter-reset: initial;
counter-reset: revert;
counter-reset: unset;

counter-resetの実例

それでは実際にcounter-resetプロパティの書き方を見ていきましょう。以下の例では、見出し要素の前に擬似要素を加えて、CSSカウンターで生成した数値を挿入します。その祭、ナンバリングを途中から始めるために、counter-resetで初期値を変えています。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	counter-reset: hcount 3;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
	counter-increment: hcount;
}
.samp_box > p {
	margin-top: 1rem;
}
h2::before {
	content: counter(hcount)".";
}
HTML
<section class="samp_box">
	<h2>見出しテキスト</h2>
	<p>段落の内容です。段落の内容です。段落の内容です。</p>
	<h2>見出しテキスト</h2>
	<p>段落の内容です。段落の内容です。段落の内容です。</p>
	<h2>見出しテキスト</h2>
	<p>段落の内容です。段落の内容です。段落の内容です。</p>
</section>

続いて、カウンターが徐々に減少していくパターンの実装です。以下の例では、counter-resetでナンバリングの初期値を定め、counter-incrementにマイナスの値を付与することで、カウントダウンを行います。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	counter-reset: hcount 4;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
	counter-increment: hcount -1;
}
.samp_box > p {
	margin-top: 1rem;
}
h2::before {
	content: "第" counter(hcount) "位:";
	color: #f00;
}
HTML
<section class="samp_box">
	<h2>カウントダウン</h2>
	<p>段落の内容です。段落の内容です。段落の内容です。</p>
	<h2>カウントダウン</h2>
	<p>段落の内容です。段落の内容です。段落の内容です。</p>
	<h2>カウントダウン</h2>
	<p>段落の内容です。段落の内容です。段落の内容です。</p>
</section>

counter-resetに関連するCSSプロパティ

内容の挿入・置換
content 特定の要素に対してコンテンツの挿入や置換を行う
counter-increment CSSカウンターの値を増加または減少させる
counter-reset CSSカウンターの値をリセットする
quotes 置換要素を使って挿入する引用符の種類を設定する