HTML要素をナンバリングする!CSS擬似要素を使って見出しに連番をつける方法

スポンサードリンク

HTML要素にナンバリングしたい場合、jQueryを使う方法が一般的ですが、CSSで行う方法を紹介します。

以下のような具合が完成イメージです。

f:id:blaireau:20150220030452p:plain

まずベースとなる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にて実装を検討してみてはいかがでしょうか。