このページの目的
CSS カウンターを使ってみる。
CSSカウンターとは？
CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。
- 見出し番号をつけるのに便利。自分で番号を付ける手間が省ける。
- 同じ名前のカウンターを、要素毎に別に利用することができる。
デモ: このページの見出し (h2要素)
HTML
<h2>このページの目的</h2>CSS
body {
/* 'demo-cnt' という名前のカウンターを 0 で初期化する */
counter-reset: h2-cnt;
}
h2::before {
/* 適用される度に、指定したカウンターがインクリメントされる */
counter-increment: h2-cnt;
/* CSS関数 counter() を使い、カウンターの値を返す */
content: counter(h2-cnt) ". ";
}
デモ: ２つのdiv要素
この時点の counter値:
この時点の counter値:
HTML
<div class="demo">
この時点の counter値:
</div>
<div class="demo">
この時点の counter値:
</div>
CSS
body {
/* 'demo-cnt' という名前のカウンターを 0 で初期化する */
counter-reset: demo-cnt;
}
.demo::after {
/* 適用される度に、指定したカウンターがインクリメントされる */
counter-increment: demo-cnt;
/* CSS関数 counter() を使い、カウンターの値を返す */
content: counter(demo-cnt);
}
デモ: アウトラインのリストに使う
CSS カウンターの使用 - 開発者ガイド | MDN に載っている例です。
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
HTML
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>
CSS
ol {
/* それぞれの ol 要素に、 section カウンターの新しいインスタンスを生成 */
counter-reset: section;
list-style-type: none;
}
li::before {
/* section カウンターのこのインスタンスのみを加算 */
counter-increment: section;
/* section カウンターのすべてのインスタンスの値を、ピリオドで区切って結合 */
content: counters(section, ".") " ";
}
- 同じ名前のカウンターを、要素毎に使うことができる。