[CSS] 連番を自動的に振るには

2009-12-19 技術

　<h3>タグ等に連番(例：章番号)を自動で振りたい場合があります。PHP等で出力している場合は簡単ですが、静的HTMLで、かつ、大量のファイルが存在する…そんな場合に威力を発揮します。

　非常に便利なのですが、注意点があります。IE6や7では使えません…。それでもいいから使いたい！という方はどうぞ。

HTMLを用意する

　HTMLは以下のように、ごく普通のHTMLです。

<div class="entry">
    <h3>ほげほげ</h3>
<div>

CSSを用意する

　当ブログのCSSからの抜粋です。

.entry h2 {
    counter-reset: chapter;
}
.entry h3:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
}

• <h3>に連番を振る場合、<h3>の前でカウンタをリセットしておきます。当ブログでは、<h2>で行っています。
• カウンタ名は「chapter」としています。

タグ: CSS