先日、本を読んでいたら目次部分の見出しは以下のような連番になっていました。
このような連番を、CSSのみでHTMLのH見出しにも適用できないかなと試してみたら、案外あっさりとできたので紹介です。
目次
見出し要素に連番を振る方法
例えばHTML見出しのh2には、「1、2、3…」と連番を振っていき、h3見出しには「1.1、1.2、1.3…」もしくは「2.1、2.2、2.3…（h2の連番が2だった場合）」といったように番号を振るにはCSSで以下のように書きます。
/************************************
** h2-h6の見出し要素に連番を振る
************************************/
.entry-content h2{
counter-increment: counter-h2;
counter-reset: counter-h3;
}
.entry-content h2:before{
content: counter(counter-h2);
margin-right: 0.6em;
}
.entry-content h3{
counter-increment: counter-h3;
counter-reset: counter-h4;
}
.entry-content h3:before{
content: counter(counter-h2)"."counter(counter-h3);
margin-right: 0.6em;
}
.entry-content h4{
counter-increment: counter-h4;
counter-reset: counter-h5;
}
.entry-content h4:before{
content: counter(counter-h2)"."counter(counter-h3)"."counter(counter-h4);
margin-right: 0.6em;
}
.entry-content h5{
counter-increment: counter-h5;
counter-reset: counter-h6;
}
.entry-content h5:before{
content: counter(counter-h2)"."counter(counter-h3)"."counter(counter-h4)"."counter(counter-h5);
margin-right: 0.6em;
}
.entry-content h6{
counter-increment: counter-h6;
}
.entry-content h6:before{
content: counter(counter-h2)"."counter(counter-h3)"."counter(counter-h4)"."counter(counter-h5)"."counter(counter-h6);
margin-right: 0.6em;
}
上記コードをCSSファイルにコピペすれば利用できるかと思います。
注意点
このCSSを利用するには、コンテンツ部分のCSSセレクターを環境に合わせて書き換える必要があります。
例えば上記のコードであれば、「.entry-content」クラスのCSSセレクターを、コンテンツ部分のCSSセレクターに置換したりする必要があります。
動作確認
今回のスタイルシートを適用した状態で、見出しのあるコンテンツなどを見ると、以下のように表示されます。
h5とかh6まで行くとややこしくなるかも
今回は、h2-h6まで番号振るように設定してあります。
なので、h2、h3、h4とかまでならまだ良いのですが、h5やh6まで行くと、番号がありすぎで逆にややこしくなってしまうかもしれません。
ここまでくると、番号が目立ちすぎてしまって、読んでもらうのには逆効果かもしれません。
利用するのであれば、3階層ぐらいにとどめておくのがちょうど良いかと思います（今回の場合は、h2-h4）。
まとめ
今回のスタイルシートは、ブログの記事を章立てて書きたいときには良いかもしれません。
また、毎回見出しに手入力で番号を振っている場合は、毎回入力する必要がなくなるので、効率的かと思います。ただ、このCSSを適用してしまうと、それまで手入力で入力していた番号の手前にも番号が表示されてしまうので、入力した番号を削除するという手間はかかります。
こんにちわ。初歩的な質問ですが
htmlの方には
ほげほげ
はげはげ
と書けば
1 ほげほげ
1.1 はげはげ
と表示されるのでしょうか？
htmlの記述の仕方がわからないです。
それとも
と記載するのか
とか記載すればいいのでしょうか？
いろいろ試してみましたが適用されませんのでよろしくお願いします。