今日もガクリ('A`)
きっと明日もまたガクリ?('A`)
CSS content プロパティで counters 自動連番

CSS 関連の記事はほとんどが IE では意味ないので悪しからず。さて、件の通り CSS の content プロパティの counters を使用した事を書いていきたいと思います。この件で検索すると例を載せた詳しい解説は山の様にあるのですが、親子孫(入れ子構造、ネスト構造とも言う) 関係を考慮した開始番号を指定して自動連番を行うという手法が見当たらなかったので、記事にします

実際、Panels UI Commands reference : 私的マニュアル の記事でこの手法を使っています。この記事の中で使用している ol 要素の CSS に自動連番を行っています。ダラダラと前置きが長くなるので、サッサと本題に入りましょう

  1. ol {
  2.   counter-reset: item 9;
  3. }
  4. li ol {
  5.   counter-reset: item;
  6. }
  7. ol li {
  8.   display: block;
  9. }
  10. ol > li::before {
  11.   content: counters( item, "." )". ";
  12.   counter-increment: item;
  13. }

文章は一般的には 章 > 節 > 項 といった親子孫関係と言ったネスト構造となっています。新しい項が開始される際には、項は 1 から始まり、また、同様に新しい節が開始される際には、節は 1 から始まります。章は大元なので一つの章が終了しても、章番号は継続されなければなりません

上記サンプル CSS 1~3行では、カウンターの開始番号を指定しています。章番号は 10 番から開始したいので 9 と指定しています。しかし、このままだと 節、項 の番号も 10 番から開始されてしまうので、4~6 行にて大元の親以外の ol 要素にカウンターのリセットを指定しています。li 要素の中に含まれる全ての ol 要素を対象としているので、大元の ol 要素には適用されません

太字で記述されている部分が、カウンターにする任意の名称です。同一の HTML 文書において一意な名称にする事をお薦めします。斜体文字の部分は開始する番号を指定します。この例ですと 10 番から開始される事になります

item って、同じ名前使ってるじゃん。おかしくならないのか?と、疑問に思われる方もいると思いますが、CSS3 Generated and Replaced Content Module ここの記述からも解るように、ネスト構造の場合は内部的に自動的に新しいカウンターを生成します。プログラミングで言うならば、ローカル変数のスコープ範囲と言った所でしょうか

CSScomments (0)trackbacks (0) – pingbacks(0) – (5,195)
feel free of the comment please.

trackback URL of this article
QRcode of this article
qrcode:article
more information of this article

post date

2008年02月06日(水) 00:01:35

update

2008年07月10日(木) 02:15:04

tags

, , , , ,

contents
most viewed (753304)
categories
archives
recent posts
recent updates
recent comments
  • muffa : Need for Speed SHIFT 2 UNLEASHED: Car Skin: BMW Z4 GT3 Racing HATSUNE MIKU Packs : 2013年04月11日(木)
  • كاميرات مراقبة جملة : Win Toolkit 使ってみた : 2013年09月21日(土)
  • brico : Need for Speed SHIFT 2 UNLEASHED: Car Skin: BMW Z4 GT3 Racing HATSUNE MIKU Packs : 2013年04月11日(木)
  • Alphaziel : PLEX PX-Q3PE (Spinel + BonCasLink + TVTest + TvRock) での録画PC 構築設定メモ : 2014年09月24日(水)
  • 泣き虫 : PLEX PX-Q3PE (Spinel + BonCasLink + TVTest + TvRock) での録画PC 構築設定メモ : 2014年09月24日(水)
recent trackbacks
mobile
qrcode:home
profile
曇り札幌市中央区 ‘ 曇り
気温: 10℃ ‘ 湿度: 66%
recommends
Valid XHTML 1.0 Transitional Valid CSS X.X
RSS 2.0 RSS 0.92
RDF/RSS ATOM
get Firefox 2 get Opera
ie