by shigemk2

当面は技術的なことしか書かない

counterのちょっとアレンジされた使い方

隠れファンが全国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番にゃあああ

追記

ちょっと編集しました