- counter-reset: カウンターを作成またはリセットします。
- counter-increment:インクリメント変数;
- content: 生成されたコンテンツを挿入します。
- counter() または counters(): カウンターの値を要素に追加します。
CSS でカウンターがどのように使用されているかを見てみましょう。
カウンターを初期化する
To use a counter, you need to use the counter-reset attribute to create a counter. このプロセスは、カウンターの初期化と呼ばれます。 counter-reset 属性の構文は次のとおりです。
counter-reset：none | [<identifier> <integer>]
パラメータの説明は次のとおりです。
- none: カウンターがリセットされないようにします。
- <identifier>: カウンターの名前を定義します。
- <integer>: カウンターの開始値を定義します。デフォルト値は 0 で、負の値にすることもできます。
カウンターインクリメント
カウンターが初期化された後、counter-increment 属性を使用して、カウンターが自動的にインクリメントされるタイミングを指定できます。構文は次のとおりです。
counter-increment：none | [<identifier> <integer>]
パラメータの説明は次のとおりです。
- none: カウンターがインクリメントされないようにします。
- <identifier>: インクリメントするカウンターの名前を定義します。
- <integer>: カウンタが毎回増加する値を定義します。デフォルト値は 1 で、負の値にすることもできます。
カウンターを表示
最後にカウンターの表示方法です。カウンターを表示するには、counter() または counters() 関数を使用できます。これら 2 つの関数の構文は次のとおりです。
counter(name)
counters(name, string, list-style-type)
パラメータの説明は次のとおりです。
- name: カウンターの名前;
- string: カウンターがネストされて使用される場合、スプライシングに使用される文字列。
- list-style-type: カウンターによって表示されるスタイル。CSS で許可されている任意の「 list-style-type 属性」の値にすることができます。
カウンターの使用法を示す簡単な例を次に示します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: chapter;
}
h5, h6 {
margin: 5px 0 5px;
}
h5 {
counter-reset: section;
counter-increment: chapter;
}
h6 {
counter-increment: section;
}
h5:before {
content: "第" counter(chapter) "章 ";
}
h6:before {
content: counter(chapter) "." counter(section) " ";
}
</style>
</head>
<body>
<h5>プログラミング言語</h5>
<h6>HTML and CSS</h6>
<h6>JavaScript</h6>
<h6>PHP</h6>
<h6>Java</h6>
<h5>データベース管理システム</h5>
<h6>MySQL</h6>
<h6>MariaDB</h6>
<h6>PostgreSQL</h6>
<h6>Oracle</h6>
</body>
</html> 実行結果は次の図のとおりです。
注: CSS カウンターを使用する前に、counter-reset でカウンターを作成する必要があります。
さらに、次の例に示すように、カウンターをネストすることもできます。counters() 関数を使用して、異なるレベルでネストされたカウンター間に文字列を挿入できます。
<!DOCTYPE html>
<html>
<head>
<style>
ol {
/* 各ol要素に新しいカウンターインスタンスを作成 */
counter-reset: ol-list;
list-style-type: none;
}
li:before {
/* 現在のカウンターインスタンスのみを増やす */
counter-increment: ol-list;
/* 全てのカウンターインスタンスに"."で区切られた値を追加 */
content: counters(ol-list, ".") "、";
}
</style>
</head>
<body>
<ol>
<li>アイテム</li>
<li>アイテム
<ol>
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム
<ol>
<li>アイテム</li>
<li>アイテム</li>
</ol>
</li>
<li>アイテム
<ol>
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
</ol>
</li>
</ol>
</li>
<li>アイテム</li>
<li>アイテム</li>
</ol>
</body>
</html> 実行結果は次の図のとおりです。
上記の例から、CSS カウンターを使用すると、他のプログラミング言語 (JavaScript、PHP など) を使用せずに単純なカウント機能を実現できることが簡単にわかります。これは、一部のコンテンツにシリアル番号を追加する必要がある場合に非常に適しています。 .