HTML要素をナンバリングする!CSS擬似要素を使って見出しに連番をつける方法
スポンサードリンク
HTML要素にナンバリングしたい場合、jQueryを使う方法が一般的ですが、CSSで行う方法を紹介します。
以下のような具合が完成イメージです。
まずベースとなるHTMLを用意します。
<article> <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> <p>ダミーテキストダミーテキスト</p> <h3>小見出し</h3> <p>ダミーテキストダミーテキスト</p> <h2>中見出し</h2> <h3>小見出し</h3> <p>ダミーテキストダミーテキスト</p> <h3>小見出し</h3> <p>ダミーテキストダミーテキスト</p> </article>
ブログなどで見掛けるHTML構造ですね。
これに対してスタイルを適用していきます。
article h1 { counter-reset: section; } article h2 { counter-reset: subsection; } article h2::before { content: counter(section) "."; counter-increment: section; } article h3::before { content: counter(section) "-" counter(subsection) " "; counter-increment: subsection; }
以上で、ナンバリング処理が可能です。
ナンバリングの機会がありましたら、CSSにて実装を検討してみてはいかがでしょうか。