隠れファンが全国7万人くらいはいるであろうcounterプロパティについて。
counter-reset−スタイルシートリファレンス
上記サイトのサンプルコードはこんな感じです。
cssソース
dt.sample1:before { counter-increment:sample; content:counter(sample) "位 "; } h3 {counter-reset:sample;}
htmlソース
<html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <h3>北海道で見たいものランキング</h3> <dl> <dt class="sample1">タンチョウ</dt><dd>見たこと無いから。</dd> <dt class="sample1">マリモ</dt><dd>話のタネに。</dd> <dt class="sample1">キタキツネ</dt><dd>かわいいから。</dd> </dl> </body> </html>
ってやると、
北海道で見たいものランキング
1位 タンチョウ
見たこと無いから。
2位 マリモ
話のタネに。
3位 キタキツネ
かわいいから。
という風に要素が連番されていく例のアレです。
要素以外のところは連番されません。当たり前ですね。
ところが、一番上の「ふあああ」と一番下の「にゃあああ」で連番さしたいときはどうしたらよいのだろうか。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HOGE</title> <link rel="stylesheet" type="text/css" href="./hoge.css"> </head> <body> <div class="hoge"> <div class="box">ふあああ</div> <div class="box">ぎゃあああ</div> <div class="box">ぎゃあああ</div> <p class="box">にゃあああ</p> </div> </body> </html>
連番させたいところでcounter-incrementすればいいです。
div.hoge { counter-reset: section; } div.fuga { height: 100px; width: 100px; } /* 連番させたい要素でcounter-incrementをやる */ p.fuga:before, div.fuga:before { counter-increment: section; content: counter(section) "番"; }
1番ふあああ
ぎゃあああ
ぎゃあああ
2番にゃあああ
追記
ちょっと編集しました