2020.04.09

【CSS】入れ子になった目次などのリストに自動で順番に番号を付与する方法

こんにちは、けいすけです。

olタグは、リストアイテムに対して順番に番号を付与する機能をもっていますよね。

しかし、olタグの機能を利用したとき、入れ子にしても1.1, 1.2, 1.3…というようにはなりません。

今回は、CSSを使って入れ子になった目次などのリストに、自動で順番に番号を付与する方法について紹介します。

目次 [表示する]

ソース上で入れ子になっている場合
ソース上で入れ子になっていない場合
まとめ

ソース上で入れ子になっている場合

番号を順番に付与するためには、擬似要素のcontentプロパティにcounters()という関数を使用します。

実装方法は、次のようになります。

HTML

    
<ol>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト
        <ol>
            <li>リスト</li>
            <li>リスト</li>
            <li>リスト</li>
            <li>リスト</li>
            <li>リスト</li>
        </ol>
    </li>
    <li>リスト</li>
    <li>リスト</li>
</ol>

CSS

    
ol {
    counter-reset: cnt;
    list-style: none;
}

ol li::before {
    counter-increment: cnt;
    content: counters(cnt, ".") ". ";
}

ポイントは次の通り

counter-resetで変数を定義（0が代入されます。）
counter-incrementをつかって、counter-resetで定義した変数に＋1
入れ子になったolタグに再度counter-resetを用いて同じ変数名に0を代入

親要素にcounter-resetで0を定義していないと、子要素で順番に番号を増やしていくことができません。

上記の場合は、liタグの擬似要素にcounter-incrementを記載しているので、ソース上にあるliタグの数だけcounter-resetで定義した変数に＋1されます。

入れ子になったolタグで、再度counter-resetで同じ変数名に0を代入することで、counters()関数は、第二引数を区切りの文字列として扱い、親要素のカウンタを保持したまま入れ子になったリストに対して順番に番号を付与することができます。

以下、表示イメージ

ソース上で入れ子になっていない場合

counter-incrementで増やしたカウンタは、counter-resetで変数を定義した親要素の外では、リセットされてしまいます。

そのため、ソース上で入れ子になっていない要素については、counters()関数を使って、親要素のカウンタを保持したまま入れ子になったリストに対して、順番に番号を付与することができません。

たとえば、見出しとして使われる、h3タグは、h2タグの子要素として扱われることはないでしょう。

このような場合に対して順番に番号を付与するときは、counter()という関数を使用します。

実装方法は、次のようになります。

HTML

    
<main>
    <section>
        <h2>タイトル</h2>
        <h3>小タイトル</h3>
        <h3>小タイトル</h3>
    </section>
    <section>
        <h2>タイトル</h2>
        <h3>小タイトル</h3>
        <h3>小タイトル</h3>
        <h3>小タイトル</h3>
    </section>
    <section>
        <h2>タイトル</h2>
        <h3>小タイトル</h3>
        <h3>小タイトル</h3>
    </section>
</main>

CSS

    
main {
    counter-reset: title;
}

section {
    counter-reset: section;
}

h2::before {
    counter-increment: title;
    content:"第" counter(title) "章 ";
}

h3::before {
    counter-increment: section;
    content:"第" counter(title) "." counter(section) "節 ";
}