counter-increment:CSSカウンターの値を増加または減少させる

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

counter-incrementプロパティの説明

counter-incrementは、CSSカウンターの値を増加または減少させるためのプロパティです。この機能を使用する場合の初期値は、counter-resetで指定できます。

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

counter-incrementに指定できる値

<custom-ident>
カウンターの名前となる文字列を指定します。この値がカウントの対象となり、1増加します。
<integer>
カウントに加える値を指定します。既定値は1です。
none
カウントは変化しません。これは既定値として扱われたり、増加や減少を取り消すために使用します。

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

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

CSS
/* カウンターを増加 */
counter-increment: counter-name;

/* カウンターを減少 */
counter-increment: counter-name -1;

/* num1 を 1 増加、 num2 を 2 減少 */
counter-increment: num1 num2 -2;

/* 増加や減少を行わない */
counter-increment: none;

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

counter-incrementの実例

それでは実際にcounter-incrementプロパティの書き方を見ていきましょう。以下の例では、見出し要素の前に擬似要素を加えて、CSSカウンターで生成した数値を挿入します。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
}
.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-incrementに関連するCSSプロパティ

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