CSS | counter-increment / counter-reset | カウンター

<ol>のようなカウンター(連番)付きの要素をCSSプロパティだけで作ります。

<ol>要素を使うと連番付きのリストを作れますが、<ol>要素を使わないで同様の結果を得ます。

このページで解説するCSSプロパティ
CSSプロパティ	設定内容
`counter-increment`	カウンター変数の定義。増分の指定。
`counter-reset`	カウンターを初期化する。初期値の指定。

`counter-increment`

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

実行結果初期状態

🍉

🍎

🍋

🍈

🍇

counter-incrementプロパティでカウンターcntを定義します。この時点では実行結果に変化はありません。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

実行結果カウンターの定義

🍉

🍎

🍋

🍈

🍇

::before疑似要素を使って、文字列の前にカウンターcntの値を表示させます。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: counter( cnt );
}

実行結果カウンターの値を表示

🍉

🍎

🍋

🍈

🍇

カウンターを[]で囲むように変更します。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

実行結果[]で囲む

🍉

🍎

🍋

🍈

🍇

増分の変更

デフォルトの増分は+1ですが、2つ目の設定値を指定することで、増分を変化させることができます。 +2と-2の例を示します。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt 2;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

実行結果増分は+2

🍉

🍎

🍋

🍈

🍇

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt -2;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

実行結果増分は-2

🍉

🍎

🍋

🍈

🍇

複数のカウンター

複数のカウンター(以下の例ではcnt1とcnt2)を設置することができます。 cnt1の増分は+2、cnt2は-2とします。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt1 2 cnt2 -2;
}

.children::before {
    content: "[ "counter( cnt1 )" ][ "counter( cnt2 )" ] ";
}

実行結果2つのカウンター

🍉

🍎

🍋

🍈

🍇

`counter-reset`

counter-incrementを設定してあります。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

実行結果初期状態

🍉

🍎

🍋

🍈

🍇

3番目の「🍋」でカウンターを初期化する方法を解説します。HTMLコードを編集して「🍋」の要素に.resetクラスを追加します。※ 実行結果に変化はありません。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children reset">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

実行結果resetクラスを追加

🍉

🍎

🍋

🍈

🍇

.resetクラスに対して、counter-resetプロパティをcntに設定します。「🍋」でカウンターが初期化されて1に戻っています。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children reset">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

.reset {
    counter-reset: cnt;    /* リセット */
}

実行結果resetクラスを追加

🍉

🍎

🍋

🍈

🍇

デフォルト値

初期化するデフォルト値は0ですが、2つ目の設定値として初期化する値を指定できます。

10と20に初期化する例を示します。それぞれ11と21から始まります。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children reset">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

.reset {
    counter-reset: cnt 10;     /* 11から */
}

実行結果10に初期化

🍉

🍎

🍋

🍈

🍇

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children reset">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

.reset {
    counter-reset: cnt 20;     /* 21から */
}

実行結果20に初期化

🍉

🍎

🍋

🍈

🍇

開始番号を指定する

常に30に初期化したい場合など、:first-child疑似要素を使って指定します。※ 31から始まります。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children reset">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

.children:first-child {     /* 疑似要素 */
    counter-reset: cnt 30;
}

実行結果30に初期化

🍉

🍎

🍋

🍈

🍇

なお、下のように(:first-child疑似要素ではなく).childrenクラスの中にcounter-resetを設定すると、常に初期化されてカウントアップしないので注意してください。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children reset">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.children {
    counter-increment: cnt;
    counter-reset: cnt 30; /* 常に初期化される */
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

実行結果常に30に初期化

🍉

🍎

🍋

🍈

🍇

また、うまくカウントアップされない場合、親要素(この例では.parentクラス)でcounter-resetを設定すると上手(うま)く行くことがあります。

HTML


<div class="parent">
    <div class="children">🍉</div>
    <div class="children">🍎</div>
    <div class="children reset">🍋</div>
    <div class="children">🍈</div>
    <div class="children">🍇</div>
</div>

CSS


.children {
    border:     1px solid #ccc; /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    margin:     3px;            /* 外側の余白 */
    padding:    7px;            /* 内側の余白 */
}

CSS


.parent {                     /* 親要素 */
    counter-reset: cnt 30;
}

.children {
    counter-increment: cnt;
}

.children::before {
    content: "[ "counter( cnt )" ] ";
}

実行結果親要素で初期化

🍉

🍎

🍋

🍈

🍇