CSSを使って目次のようにナンバーリングする方法

2018.5.15

はじめに

CSSだけで、項目に項番を振る方法です。

サンプルコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            counter-reset: lv1;
        }

        h1 {
            counter-reset: lv2;
        }

        h2 {
            counter-reset: lv3;
        }

        h1:before {
            content: counter(lv1) ".";
            counter-increment: lv1;
        }

        h2:before {
            content: counter(lv1) "." counter(lv2) ".";
            counter-increment: lv2;
        }

        h3:before {
            content: counter(lv1) "." counter(lv2) "." counter(lv3) ".";
            counter-increment: lv3;
        }
    </style>
</head>

<body>
    <h1>大項目</h1>
    <h2>中項目</h2>
    <h3>小項目</h3>
    <h3>小項目</h3>
    <h3>小項目</h3>
    <h2>中項目</h2>
    <h2>中項目</h2>
    <h3>小項目</h3>
    <h3>小項目</h3>
    <h3>小項目</h3>
    <h1>大項目</h1>
    <h2>中項目</h2>
    <h3>小項目</h3>
    <h3>小項目</h3>
    <h2>中項目</h2>
    <h3>小項目</h3>
    <h3>小項目</h3>

</body>

</html>