2011年01月08日

CSS で 連番つき見出し をつくる

<h1> や、<h2> でつくる見出しに、連番をふってみよう。

Chapter_2

みたいな感じ。

コード

上の表示は、以下の HTML と CSS で実現しています。(ココログでは h3 までが使われているため、h4 からを利用するようにします)

HTML サンプル
<h4>最初のおはなし</h4>
<h4>次のおはなし</h4>
<h5>そのなかの最初</h5>
<h5>そのなかの次</h5>
<h4>最後のお話</h4>
<h5>最後のなかの最初</h5>
CSS サンブル
/* カウンターの初期化 */
body {
  counter-reset: chapter;
  counter-reset: section;
}
/* ブログエントリー タイトル で、chapter リセット */
h3 {
  counter-reset: chapter;
}
/* h4 : チャプター */
h4:before {
  content: counter(chapter) ". ";
  counter-increment: chapter;
}
h4 {
  counter-reset: section;
}

/* h5 : セクション */
h5:before {
  content: counter(chapter) "." counter(section) ". ";
  counter-increment: section;
}
h5 {
}

解説

ポイントは、counter 機能 と、before 機能。
counter 機能
任意の名前で counter を生成して利用できる。
counter-reset: カウンター名; カウンターをリセットする
counter-increment: カウンター名 加算値; カウンター値を増減する(加算値を省略すると、+1 になる)
counter(カウンター名) カウンターの値を出力する。オプションで文字種等の指定も可能
before 機能
before 指定することで、指定のブロックの直前に、ブロックを追加できる
ここでは、この機能を利用して、セクション番号を出力している。
上の説明で、ほぼ言い尽くしてますが、つまり
  • before ブロックに
  • counter 値を表示する
ということ。 counter は、利用ごとに +1 するようにして、上位セクションでリセットします。

はまりポイント

  • counter-reset は、before ではなくて、本体のほうに記述する
    つい before のほうに書きたくなりますが、それでは リセットされません。
  • counter-reset を実行しないと、以降の counter-increment がうまく動作しない
    body で リセットしても不十分なようで、ここでは 必ず出現するはずの h3 でリセットしています。
  • h4:before 内の記述順序にかかわらず、counter-increment が最初に実行されます。
    上記例では、counter-increment は最後に記述していますが、実行は increment が先で、表示は increment 後の値になります。
以上、CSS で 見出しに連番を振る方法。


posted by tekniq at 21:32 | Comment(0) | TrackBack(0) | HTML/css/php/perl/javascript