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>
HTMLとCSS関連記事





これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]