HTML見出しにCSSのみで本の目次のような連番を振る方法

先日、本を読んでいたら目次部分の見出しは以下のような連番になっていました。

本の見出しの連番

このような連番を、CSSのみでHTMLのH見出しにも適用できないかなと試してみたら、案外あっさりとできたので紹介です。

スポンサーリンク
レクタングル(大)広告

見出し要素に連番を振る方法

例えばHTML見出しのh2には、「1、2、3…」と連番を振っていき、h3見出しには「1.1、1.2、1.3…」もしくは「2.1、2.2、2.3…(h2の連番が2だった場合)」といったように番号を振るにはCSSで以下のように書きます。

上記コードをCSSファイルにコピペすれば利用できるかと思います。

注意点

このCSSを利用するには、コンテンツ部分のCSSセレクターを環境に合わせて書き換える必要があります。

例えば上記のコードであれば、「.entry-content」クラスのCSSセレクターを、コンテンツ部分のCSSセレクターに置換したりする必要があります。

動作確認

今回のスタイルシートを適用した状態で、見出しのあるコンテンツなどを見ると、以下のように表示されます。

見出しに連番が振られた

h5とかh6まで行くとややこしくなるかも

今回は、h2-h6まで番号振るように設定してあります。

なので、h2、h3、h4とかまでならまだ良いのですが、h5やh6まで行くと、番号がありすぎで逆にややこしくなってしまうかもしれません。

h5、H6だと番号を多すぎ

ここまでくると、番号が目立ちすぎてしまって、読んでもらうのには逆効果かもしれません。

利用するのであれば、3階層ぐらいにとどめておくのがちょうど良いかと思います(今回の場合は、h2-h4)。

まとめ

今回のスタイルシートは、ブログの記事を章立てて書きたいときには良いかもしれません。

また、毎回見出しに手入力で番号を振っている場合は、毎回入力する必要がなくなるので、効率的かと思います。ただ、このCSSを適用してしまうと、それまで手入力で入力していた番号の手前にも番号が表示されてしまうので、入力した番号を削除するという手間はかかります。