« livedoor AuthのマークアップとCSSやりました | Back To Blog Top | nowa、クローズドβ中 »
CSSだけでコメントに番号を振ってみる
本日はTips記事でございます。
Blogなんかで、コメントに番号が付くのってありますよね。
あれをCSSだけで実現してみます。
サンプル
見ての通り、何の変哲もないh3要素に、番号が振られています。
これを指定しているのが、あまり見慣れないcounter()関数 です。
ソースを解説すると、
「h3要素の直前（before）にcontentプロパティで次の値を生成する。
『counter関数でchapterと文字列 .』 」
となります。
ただし、これだけでは数字は増えていきません。
これを増やしていくには、counter-incrementプロパティを使用します。
counter関数の引数chapterと、counter-incrementプロパティの値chapterが対になっているのがポイントです。
counter-increment。 インクリメントと聞くとプログラムのインクリメントが連想されますけど、正にそれです。
counterをインクリメント、つまり1つ増やします。 これにより、h3要素が登場するたびに数字が一つづつ増えていきます。
また、chapter 2 などとする事で、上げ幅を指定する事もできます。
counter()関数の後の "." は、単純に文字列を生成しているだけです。
応用
サンプルの下部には、応用版を載せてみました。
counter()関数の引数だったchapterには仲間がいて、その名を section と subsection と言います。
これらは別々にカウントする事ができて、おカタイ文書でよく使われている風の見出しが作れたりします。
数字が増えていく一方だと困る場合には、counter-resetプロパティでリセットする対象（chapterとかsectionとか）を指定します。
ただ、このテクニックはIE様はもちろんなんですけど、ちょっと前のFirefoxも未対応なようです（NN7はダメでした）。
使う際には、ターゲットブラウザをよく考えて使いたいですね。
以下、追記にて蛇足。
ここまで書いてから、MTのプラグインで全ブラウザに対応しているのがありそうだなあ、と思ったってオチ。
見つかったら悔しいからあえて探さないっ。
おまけ
さらにここまで書いてから、ふと思い出して平澤さんのCSS HappyLifeを見に行ったら、何やら目からしょっぱい汁が出てきましたよー！