「CSS」の版間の差分
削除された内容 追加された内容
編集の要約なし |
CSSカウンタについて追記。 |
||
337 行
<style type="text/css">
body {
counter-reset: i;
}
h3::before {
counter-increment: i;
content: counter(i);
}
</style>
</head>
350 ⟶ 351行目:
<body>
<h3>はじめに</h3>
<h3>文字表示のしかた</h3>
<h3>算術演算</h3>
</body>
384 ⟶ 385行目:
<style type="text/css">
body {▼
}
h3::before {▼
▲body {
counter-
content: "第" counter(i) "章 "; ▼
}
▲h3::before {
▲ counter-increment: i;
▲ content: "第" counter(i) "章 ";
</style>
</head>
398 ⟶ 400行目:
<body>
<h3>はじめに</h3>
<h3>文字表示のしかた</h3>
<h3>算術演算</h3>
</body>
436 ⟶ 438行目:
なお上述のiの直後の増分間隔の数値には、0 や -1 など指定できる。(Fedora32 環境での Firefox75で動作確認ずみ。)
CSSのbodyのほうに
counter-reset: i 10;
のように変数のあとに数値を書くことで0以外の数値から数えることができる。
何も指定しない場合、CSSでは0番から数えている。いくつか前の節で「第1章 はじめに」のように表示されるのは、最初の1回目のカウントのときに、+1したからである。
;コード例
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSカウンターのテスト</title>
<style type="text/css">
body {
counter-reset: i 10;
}
h3::before {
counter-increment: i -1;
content: "のこり" counter(i) "秒 ";
}
</style>
</head>
<body>
<h3></h3>
<h3></h3>
<h3></h3>
</body>
</html>
</syntaxhighlight>
;表示結果
<pre>
のこり 9秒
のこり 8秒
のこり 7秒
</pre>
このように、最初のカウントの際、すでに増減された状態で表示されている。（なので「のこり 10秒」でなく「のこり 9秒」から表示している。）
なお、説明の簡単化のため、秒数カウントダウンのような文字表示をしたが、ブラウザで表示を放置していても、べつにカウントダウンが進行したりはしないので、誤解のないように。
<syntaxhighlight lang="html5">
</syntaxhighlight>
{{-}}
| |||