CSS辞典 counter()関数の解説
カウンターを使用するcounter()関数の使用方法と使用例、サンプルコードを記載
概要・使用方法
{ プロパティ:counter(キーワード)}「counter()関数」は、自動連番のようなカウンター機能を付けることができます。多くはcounter-resetプロパティ、counter-incrementプロパティと一緒に使用する。
キーワード
| キーワード | 任意の文字列。半角数字からはじめることはできない。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>counter-incrementプロパティ、counter-resetプロパティ サンプル</title>
<meta charset="uft-8">
<style>
.count_list{
list-style-type: none;
}
.counterreset {counter-reset: my-number 1;}
.count_list li{
counter-increment: my-number 1;
}
.count_list li::before{
content: "ゼッケン"counter(my-number)"番:";
}
</style>
</head>
<body>
<div>
<h1>日本ウサギちゃんダービー（女子の部）</h1>
<ul class="count_list">
<li>うさよ</li>
<li>うさこ</li>
<li>うさぽん</li>
<li class="counterreset">うさko（代走）</li>
<li>うさpon（代走）</li>
</ul>
</div>
<div>
<h1>日本ウサギちゃんダービー（男子の部）</h1>
<ul class="count_list">
<li>うさ次郎</li>
<li>うさ太郎</li>
<li>うさ三郎</li>
</ul>
</div>
</body>
</html>実行結果
日本ウサギちゃんダービー（女子の部）
- うさよ
- うさこ
- うさぽん
- うさko（代走）
- うさpon（代走）
日本ウサギちゃんダービー（男子の部）
- うさ次郎
- うさ太郎
- うさ三郎
各ブラウザの挙動は下記参照