counter-incrementプロパティの説明
CSSのcounter-incrementプロパティは、CSSカウンターの値を増加または減少させるためのプロパティです。この機能を使用する場合の初期値は、counter-resetで指定できます。
CSSカウンターを利用すると、特定の要素に対して自動的に連番を振るナンバリング機能を実装できます。ひとつのページに複数のセクションや見出しが配置される場合に、手書きで編集することなく番号を管理できます。表現に関する指定も「1-1」「1-2」「1-3」といったものから「第一章」「第二章」「第三章」といったものまで、任意の形式を作成可能です。
counter-incrementに指定できる値
<custom-ident>- カウンターの名前となる文字列を指定します。この値がカウントの対象となり、1増加します。
<integer>- カウントに加える値を指定します。既定値は
1です。 none- カウントは変化しません。これは既定値として扱われたり、増加や減少を取り消すために使用します。
counter-incrementの使い方とサンプルコード
counter-incrementプロパティの構文は以下の通りです。
/* カウンターを増加 */
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カウンターで生成した数値を挿入します。
<section class="samp_box">
<h2>見出しテキスト</h2>
<p>段落の内容です。段落の内容です。段落の内容です。</p>
<h2>見出しテキスト</h2>
<p>段落の内容です。段落の内容です。段落の内容です。</p>
<h2>見出しテキスト</h2>
<p>段落の内容です。段落の内容です。段落の内容です。</p>
</section>
.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) ".";
}
続いて、カウンターが徐々に減少していくパターンの実装です。以下の例では、counter-resetでナンバリングの初期値を定め、counter-incrementにマイナスの値を付与することで、カウントダウンを行います。
<section class="samp_box">
<h2>カウントダウン</h2>
<p>段落の内容です。段落の内容です。段落の内容です。</p>
<h2>カウントダウン</h2>
<p>段落の内容です。段落の内容です。段落の内容です。</p>
<h2>カウントダウン</h2>
<p>段落の内容です。段落の内容です。段落の内容です。</p>
</section>
.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;
}