|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
WEB技術の辞書・解説・使用例
counter-reset
要素の連番（カウンタ）の値をリセットする
counter-resetプロパティは、要素の連番（カウンタ）の値をリセットする際に使用します。
counter-resetプロパティを適用した要素が現われるたびに、指定した名前のカウンタの値が0にリセットされます。また、カウンタ名の後にスペース区切りで整数値を指定すると、カウンタの値がその数にリセットされます。
counter-resetプロパティを適用した要素が現われるたびに、指定した名前のカウンタの値が0にリセットされます。また、カウンタ名の後にスペース区切りで整数値を指定すると、カウンタの値がその数にリセットされます。
none
カウンタの値をリセットしない（初期値）
カウンタ名
指定した名前のカウンタの値が0にリセットされる
カウンタ名 整数値
半角スペースで区切って整数値を指定すると、カウンタの値がその数にリセットされる
カウンタの値をリセットしない（初期値）
カウンタ名
指定した名前のカウンタの値が0にリセットされる
カウンタ名 整数値
半角スペースで区切って整数値を指定すると、カウンタの値がその数にリセットされる
スタイルシート部分は外部ファイル（sample.css）に記述。
dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位 ";
}
h3 {counter-reset:sample;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3>北海道で見たいものランキング</h3>
<dl>
<dt class="sample1">タンチョウ</dt><dd>見たこと無いから。</dd>
<dt class="sample1">マリモ</dt><dd>話のタネに。</dd>
<dt class="sample1">キタキツネ</dt><dd>かわいいから。</dd>
</dl>
<h3>北海道で食べたいものランキング</h3>
<dl>
<dt class="sample1">ウニ</dt><dd>ご飯に乗せて。</dd>
<dt class="sample1">カニ</dt><dd>まるごとボイルで。</dd>
<dt class="sample1">ソフトクリーム</dt><dd>夏に行くなら。</dd>
</dl>
</body>
</html>
dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位 ";
}
h3 {counter-reset:sample;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3>北海道で見たいものランキング</h3>
<dl>
<dt class="sample1">タンチョウ</dt><dd>見たこと無いから。</dd>
<dt class="sample1">マリモ</dt><dd>話のタネに。</dd>
<dt class="sample1">キタキツネ</dt><dd>かわいいから。</dd>
</dl>
<h3>北海道で食べたいものランキング</h3>
<dl>
<dt class="sample1">ウニ</dt><dd>ご飯に乗せて。</dd>
<dt class="sample1">カニ</dt><dd>まるごとボイルで。</dd>
<dt class="sample1">ソフトクリーム</dt><dd>夏に行くなら。</dd>
</dl>
</body>
</html>