「CSS」の版間の差分
削除された内容 追加された内容
CSSカウンター |
編集の要約なし |
||
304 行
== CSSカウンター ==
=== 基本 ===
CSSで、呼び出し回数をカウントをする機能がある。
314 行
<pre>
body {
counter-reset: 変数名; // カウンター変数をリセット
}
連番させたいタグ::before {
counter-increment: 変数名; // 変数名のあとに数字を指定すると、増分の間隔を指定できる。何も数値指定しない場合は1ずつ増分
counter-increment: 変数名;▼
content: counter(変数名); // カウントする変数とその書式
}
</pre>
370 行
書式のとおりだと、番号「1」と「はじめに」のあいだに隙間が無く、やや読みづらい。
=== 番後の前後に文字をつけたす ===
そこで、 contentプロパティのところを
<pre>
412 行
第3章 算術演算
</pre>
=== 増分の間隔を変更 ===
プロパティ
というように counter-increment プロパティの変数(i)のあとに数値指定すると、2→4→6 というふうに数える。つまり
<pre>
第2章 はじめに
第4章 文字表示のしかた
第8章 算術演算
</pre>
と表示が変わる。
つまり、
counter-increment: i;
と変数のあとに何も数値を書かない場合は、
counter-increment: i 1;
と同じ結果になる。
なお上述のiの直後の増分間隔の数値には、0 や -1 など指定できる。(Fedora32 環境での Firefox75で動作確認ずみ。)
<syntaxhighlight lang="html5">
| |||