CSSでどの要素にも通し番号を付けれるカウンタというものを調べてみた

ol要素のli要素以外の要素、例えばdl要素にも通し番号は付けれないのかなーと、思い調べてみましたが、どうやらその方法があるようですね。

dl要素にも通し番号は付けれないのかと、一度はやってしまいがちな指定方法は以下のようになると思います。

dt{
list-style-type: decimal;
}

list-style-typeはli要素での適用になるため、当然ながらdt要素には無効になります。

list-style-imageプロパティという手もありますが、画像を用いるので、その画像作成しなければならないので、それなりに面倒です。

では、スクリプトを作成するか!と、ちょっと意気込んだのですが、その前にCSSでできるのかを調べてみると、ありました!!

カウンタについて - CSSリファレンス

上記サイトのサンプルソースコードを参考にdl要素に適用させると、見事に通し番号を付けることができました!!

そして、またもや自分の知識不足を痛感しました.......orz。もっと頑張らなければ.....

一応、dl要素への通し番号を付けるCSSソースコードは以下のようになります。

dl {
counter-reset: count 0;
}

dl>dt:before {
counter-increment: count;
content: counter(count) ". ";
}

手順とすると以下のようになります。

  1. counter-resetプロパティを用いて、カウンタの初期設定を行います。親要素に指定。さらにここではcountという変数を指定してその初期の数値を0に指定しています。
  2. counter-incrementプロパティを用いて、番号を1.2.3.のような通し番号にするために指定します。
  3. contentプロパティを用いて、通し番号の出力を指定します。出力にはcounter()を用います。

h要素の場合

dl要素以外、例えば、今回はh3要素での通し番号を付けるには、以下のようになります。

仮にマークアップは以下のような場合

<div>
<h3>受付時間</h3>
<p>月から土曜日 午前9時から午後9時</p>
<h3>申込書の請求</h3>
<p>お電話、お問い合わせフォーム、またはE-mailにてお問い合わせください</p>
<h3>申込書の提出</h3>
<p>事務局窓口へ持参ください</p>
<h3>お支払い</h3>
<p>入金締切日までに指定口座にお振り込みください。</p>
</div>

番号はh3に付けたいのですが、通し番号をつけるためには、h3の親要素にカウンタの初期設定を行わなければなりません。この場合の親要素はdiv要素になりますので、CSSのソースコードは以下のようになります。

div {
counter-reset: count 0;
}

div>h3:before {
counter-increment: count;
content: counter(count) ". ";
}

ただし、counter-incrementなどはIE7には対応していませんので、あしからず