contentプロパティでコンテンツを追加する(3):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-28 17:50:01
  • このエントリーをはてなブックマークに追加

 前回の「contentプロパティでコンテンツを追加する(1)--FirefoxとSafariのCSSと、前々回の「contentプロパティでコンテンツを追加する(2):FirefoxとSafariのCSS」では、contentプロパティを用いて文字列や画像を追加した。

 今回は、contentプロパティで連番を追加する方法を紹介する。また、contentプロパティを利用して文字列を括弧で囲む方法も紹介したい。

見出しの前に連番を追加する

 連番を追加する場合、contentプロパティの値は次のようなかたちで指定する。カウンター名には任意の名前を指定することが可能だ。なお、contentプロパティを利用した連番の追加にはFirefoxSafariOperaが対応していたが、Internet Explorerもバージョン8(ベータ版)で対応した。

content: counter(カウンター名)

 たとえば、

でマークアップした大見出しの前に連番を追加するには、以下のようにcontentプロパティを指定する。ここでは「counter(section)」と指定して、カウンター名を「section」に設定した。しかし、この段階では「0」という番号が表示されるだけで、連番にはなっていない。

大見出しの前に番号を表示したもの 大見出しの前に番号を表示したもの
h1:before{
content: counter(section);
}

大見出し

文字文字文字文字文字文字文字文字文字文字文字。文字文字文字文字文字文字文字文字文字文字文字。

大見出し

文字文字文字文字文字文字。文字文字文字文字文字。文字文字文字文字文字文字文字文字文字文字文字文字。

大見出し

文字文字文字文字文字文字文字文字文字文字文字。文字文字文字文字文字文字文字文字文字文字文字。

ブラウザで表示を確認する

 連番で表示するには、counter-incrementプロパティの設定を追加する。counter-incrementプロパティでは番号を増やしたいカウンターの名前を指定する。これで、大見出しの前に追加した番号が「1」「2」……と増えるようになり、連番で表示される。

番号が連番で表示される 番号が連番で表示される
h1:before{
content: counter(section);
}

h1{
counter-increment: section;
}
ブラウザで表示を確認する

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]