CSS-カウンターインクリメント

説明

_counter-increment_プロパティは、セレクタが出現するたびにカウンタが増分する量を設定します。デフォルトの増分は1です。

可能な値

name -カウンターの名前。名前には任意の文字列値を使用できます。
integer -要素がドキュメントに表示されるたびに、名前付きカウンターの増分を定義します。この増分はゼロ、または負の値になります。整数が指定されていない場合、カウンターは1ずつ増加します。
none -インクリメントは実行されません。

に適用されます

すべてのHTML要素。

DOM構文

object.style.counterIncrement = "chapter 2";

例

この例は、「第1章」、「1.1」、「1.2」などで章とセクションに番号を付ける方法を示しています。

<html>
   <head>
      <style>
         body {
            counter-reset: section;
         }
         h1 {
            counter-reset: subsection;
         }
         h1:before {
            counter-increment: section;
            content: "Section " counter(section) ". ";
         }
         h2:before {
            counter-increment: subsection;
            content: counter(section) "." counter(subsection) " ";
         }
      </style>
   </head>

   <body>
      <h1>HTML tutorials</h1>
      <h2>HTML Tutorial</h2>
      <h2>XHTML Tutorial</h2>
      <h2>CSS Tutorial</h2>

      <h1>Scripting tutorials</h1>
      <h2>JavaScript</h2>
      <h2>VBScript</h2>
   </body>
</html>

それは次の結果を生成します-

Css-counter-increment

CSS-カウンターインクリメント

説明

可能な値

に適用されます

DOM構文

例

目次