PR
用途 リストや見出しへ自動的に連番の番号を指定する
[ <identifier> <integer>? ]+ | none | inherit
対象となる要素 すべて
解説

章や節に分かれる文章を公開する場合など、見出しへ連番の番号を与えたい場合があるでしょう。そのような時利用できるのが本プロパティです。
まず'counter-incriment'でカウンタに識別子を与えます。識別子はsectionやchapterなど、章や節という文章の区切りを表す単語を与えると良いでしょう。識別子を与えた番号には、「第●章」のように前後に独自の表題を付けることもできます。表題に該当する値は前後にダブルクォーテーションを与えます。カウントアップする数字はcounter(識別子)で表示させます。見出しの先頭に数字を表示させるためにはh1:beforeと擬似要素をセレクタに指定します。見出しの後に付けたい際はh1:afterとなります。章から節に移行した時など、一度カウントアップを初期化したい際は、'counter-reset'に下のレベルのカウンター識別子を指定します。
本プロパティは今のところFirefoxやOperaといったブラウザに対応が限定されています。

スタイルの例

h1:before {
content: "第" counter(chapter) "章 : ";
counter-increment: chapter;
counter-reset: section;

}

h2 {
counter-increment : section ;
counter-reset : subsection ;

color : #333333 ;
}

h2:before {
content : "第" counter(section) "節 : " ;
font-size : 0.9em ;
color : #666 ;
}

ol { counter-reset: item;
margin-bottom:5px;
color:#333333;
}

li { display: block;
margin-bottom:5px;
}

li:before {
content: counters(item, "の");
counter-increment: item ;

}

サンプルページの表示(別ウィンドウ)

値の表記について

  1. CSS2のプロパティは解説の中で<color>など単位の表記と混同することを避ける目的でSingle Quotation(')で囲っています。
  2. Box bracket [ ] は、各プロパティに指定可能な値をグループ化しています。
  3. Bar | は各プロパティに指定可能な値を区切っています。
  4. 2重のBar || は各プロパティに指定可能な値のグループ、または個別の特性を持つプロパティを区切っています。
  5. inheritは親要素のプロパティが継承できる種類であることを意味します。
  6. <length>や<color>、<percentage>などAngle brackets < > で囲ったものは、それぞれ単位を採用できる値です。
  7. <margin-width>{1,4}のように単位がBraces { }で囲った整数を伴う場合は、その数だけ単位の指定が可能です。例の場合は単位を上、下、左、右のように1つ以上、4つ以下で単位を複数指定できる、という意味になります。
  8. <length>? のように単位が疑問符を伴う場合は、単位を0または1つだけ指定できる、という意味になります。
  9. [<uri> ,]* のように単位がAsteriskを伴う場合は、単位を0以上指定できます。つまり指定しなくても良い、または必要あれば可能な限り指定できるという意味です。
  10. [ <identifier> <integer>? ]+ のように単位(のグループ)がPlus + を伴う場合は、単位を必要あれば可能な限り指定できるという意味です。例の場合は識別子と整数(1つだけ)のセットを必要なだけ指定できる、となります。