counter-resetプロパティの説明
CSSの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
プロパティの構文は以下の通りです。
/* カウンターを 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
で初期値を変えています。
<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 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)".";
}
続いて、カウンターが徐々に減少していくパターンの実装です。以下の例では、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;
}