【HTML5】CSSカウンタ
CSSカウンタ
・独自のカウンタを作成できる
・counter-resetプロパティ、counter-incrementプロパティ、contentプロパティを使用する
・まずcounter-resetプロパティでカウンタをリセットする
・その後counter-incrementプロパティでカウントアップ、カウントダウンできる
・contentプロパティの値としてcounter関数でカウンタの値を出力する
CSSカウンタを使用するためのHTMLの記述例
<body>
<h3>Webの基礎知識</h3>
<h3>CSS</h3>
<h3>要素</h3>
<h3>レスポンシブWebデザイン</h3>
<h3>APIの基礎知識</h3>
</body>
CSSカウンタを使用するためのCSSの記述
body{
counter-reset: section;
}
h3::before{
counter-increment : section ;
count: counter(section) "章";
}
実行イメージ
1章 Webの基礎知識
2章 CSS
3章 要素
4章 レスポンシブWebデザイン
5章 APIの基礎知識
引用元
