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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

本の見出しの連番

このような連番を、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を適用してしまうと、それまで手入力で入力していた番号の手前にも番号が表示されてしまうので、入力した番号を削除するという手間はかかります。

『HTML見出しにCSSのみで本の目次のような連番を振る方法』へのコメント

  1. 名前:ぬこ 投稿日:2016/10/09(日) 10:24:20 ID:bab7d7915

    こんにちわ。初歩的な質問ですが

    htmlの方には

    ほげほげ
    はげはげ

    と書けば
    1 ほげほげ
    1.1 はげはげ

    と表示されるのでしょうか?

    htmlの記述の仕方がわからないです。

    それとも

    と記載するのか

    とか記載すればいいのでしょうか?

    いろいろ試してみましたが適用されませんのでよろしくお願いします。

  2. 名前:ぬこ 投稿日:2016/10/09(日) 10:50:49 ID:bab7d7915

    タグを記載しましたが消えていましたので追記です

    htmlの方には

    ほげほげ
    はげはげ
    と書きました。

  3. 名前:ぬこ 投稿日:2016/10/09(日) 10:52:54 ID:bab7d7915

    あぁダメですねスペースあけてタグ書いても消えますね。。

    h2 ほげほげ スラッシュh2
    h3 はげはげ スラッシュh3
    ということです。

  4. 名前:ぬこ 投稿日:2016/10/09(日) 10:54:53 ID:bab7d7915

    あっ…
    それとも
    のあとのタグも消えてますね…

  5. 名前:ぬこ 投稿日:2016/10/09(日) 12:00:28 ID:bab7d7915

    解決いたしました。
    どうもありがとうございます。

  6. わいひら 名前:わいひら 投稿日:2016/10/10(月) 13:26:07 ID:b805b98dd

    返信が遅くなりました。けれど、解決できたようでよかったです。
    Wordpressのコメント欄は、h2・h3の見出しもそのまま出力されてしまうようですね。