CSS のカウンタを使うときの注意点

counter

counter を使う際の注意。

counter とは

簡単に言うと自動的に連番を振る機能。詳しくはこちらに書いてあります。

Firefox における注意

h1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter; /* chapter のカウントを増やす */
    counter-reset: section; /* section のカウントをリセットする */
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section; /* section のカウントを増やす */
}

上記のようなソースを実際にブラウザに表示させると、以下のようになります。

図. Internet Explorer での表示

図. Firefox での表示

Internet Explorer で表示すらされないのはともかく、Firefox では表示はされますがきちんと連番になっていません。

Firefox できちんと連番になるようにするには、最初に counter-reset をすることが必須なようです。つまり、最初の h1 要素が出るまでに "counter-reset: chapter" をしなければいけません。最も良いのは body 要素において reset することかと思われます。また、擬似要素 :before 内での reset は効果がないようで、"counter-reset: section" は、h1:before 要素内でするのではなく、h1 要素内でする必要があります。

body {
	counter-reset: chapter; /* あらかじめリセットしておく必要がある */
}
h1 {
	counter-reset: section; /* h1:before ではなく h1 でリセットしなければならない */
}
h1:before {
	content: "Chapter " counter(chapter) ". ";
	counter-increment: chapter;
}
h2:before {
	content: counter(chapter) "." counter(section) " ";
	counter-increment: section;
}

上記のような CSS を書いて Firefox で表示すると、きちんと連番になりました。

図. Firefox での表示