CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。

カウンターの使用

カウンターの値の操作

カウンターを使用するには、最初に必ず counter-reset プロパティで値を初期化する必要があります (既定値は 0)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は counter-increment で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。

カウンターの表示

カウンターの値は、 content の中で counter() 又は counters() 関数を使用して表示することができます。

counter() には 'counter(name)' 又は 'counter(name, style)' の2つの形があります。生成される文字列は、その疑似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は decimal です)。

counters() 関数にも、 'counters(name, string)' 又は 'counters(name, string, style)' の2つの形があります。生成される文字列は、その疑似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は decimal です)。

基本的な例

この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。

CSS

body {
  counter-reset: section;                     /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
}

h3::before {
  counter-increment: section;                 /* section カウンターの値に1を加算 */
  content: counter(section);                  /* section カウンターの値を表示 */
}

HTML

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

結果

カウンターの入れ子

CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 counters() 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。

入れ子になったカウンターの例

CSS

ol {
  counter-reset: section;                /* それぞれの ol 要素に、 section 
                                            カウンターの新しいインスタンスを
                                            生成 */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* section カウンターのこのインスタンス
                                            のみを加算 */
  content: counters(section, ".") " ";   /* section カウンターのすべての
                                            インスタンスの値を、ピリオドで区切って
                                            結合 */
}

HTML

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

結果

仕様書

仕様書 策定状況 コメント
CSS Lists Module Level 3
CSS Counters の定義
草案 変更なし
CSS Level 2 (Revision 1)
CSS Counters の定義
勧告 初回定義

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy, sii
最終更新者: mfuji09,