概要
「セクション1..2..3..」などの連番を実装したい場合に有効的である、カウンターをCSSで実現する方法を記載する。
この記事で理解できること
- CSSでのカウンター作成方法
- CSSのcounter関数の使用方法
- counter関数の関連プロパティ、関連要素
必要なCSSプロパティ
| プロパティ名 | 内容 | 書式 |
|---|---|---|
| counter-reset | カウンター(値を管理する変数)の初期値を設定する ※このプロパティを指定したタグやclassが出てくるたびに値が初期化される |
counter-reset: {値を管理したい変数名} {初期値}; |
| counter-increment | 値の増加値を設定 | counter-increment: {変数名} {増加数} |
| content | 表示形式を指定(counter関数はこのプロパティで使用) | {付加値(前)} content: counter({変数名}) {付加値(後)} |
contentプロパティについて
「ポイント1:」や「第1章:」などと表示したい場合、{付加値(前・後)}と記載している箇所に値を指定することで
カウントする値の前後(「ポイント」や「:」にあたる箇所)の表示を設定できる。
作成の流れ
① カウンター変数に初期値を設定(初期化)
② 値の増加数を指定
③ 表示形式を指定
★ カウンターはある要素の擬似要素(:beforeなど)を用いて使用することが多い。
★ ①は実際にカウンター値を使用するタグ(要素)を囲っているタグ(要素)に指定する必要があります。
実際に例を見た方が理解できると思いますので、次へいきましょう。
実際に作成してみる
※bodyタグ・タグ内の要素以外は省略しています。
作成例①
<body>
<ul class="menu-list">
<li class="menu-item">メニューアイテム</li>
<li class="menu-item">メニューアイテム</li>
<li class="menu-item">メニューアイテム</li>
</ul>
</body>
style.css
/* liタグデフォルトの「・」を非表示にしておきたいので設定 */
li {
list-style: none;
}
/* 今回ulタグに指定したclass */
.menu-list {
counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は「number」という変数名で値を管理し、初期値を0に設定 */
}
/* 今回liタグに指定したclassの擬似要素へ指定 */
.menu-item::before {
counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */
content: counter(number) ' '; /* ③ 表示形式を指定 : counter関数の引数には①ので作成した変数を指定し、カウンター値の後ろにスペースを指定 */
}
作成例②
<body>
<ul class="menu-list">
<li class="menu-item">旅立ち</li>
<li class="menu-item">出会い</li>
<li class="menu-item">別れ</li>
</ul>
</body>
/* liタグデフォルトの「・」を非表示にしておきたいので設定 */
li {
list-style: none;
}
/* 今回ulタグに指定したclass */
.menu-list {
counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は例として「number」という値を管理する変数名で初期値を0に設定 */
}
/* 今回liタグに指定したclassの擬似要素へ指定 */
.menu-item::before {
counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */
content: '第' counter(number) '章： '; /* ③ 表示形式を指定 : 今回はカウンター値の前後に付加値を設定 */
}
counter関数のスタイル(style)
counter関数にCSS側で用意されているスタイル(style)を指定することで、
以下のようなスタイル設定を行うことができる。(作成例②の例を漢数字にしたい場合など)
参考資料 ： CSS Counter Styles Level 3
<!-- 作成例②と同じ -->
<body>
<ul class="menu-list">
<li class="menu-item">旅立ち</li>
<li class="menu-item">出会い</li>
<li class="menu-item">別れ</li>
</ul>
</body>
/* liタグデフォルトの「・」を非表示にしておきたいので設定 */
li {
list-style: none;
}
/* 今回ulタグに指定したclass */
.menu-list {
counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は例として「number」という値を管理する変数名で初期値を0に設定 */
}
/* 今回liタグに指定したclassの擬似要素へ指定 */
.menu-item::before {
counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */
content: '第' counter(number, cjk-ideographic) '章： '; /* ③ 表示形式を指定 : counter関数の漢数字スタイルを指定 */
}