こちらの記事は
- CSS
- html
の知識がある方向けの記事です。
CSSの変数で動的な数字を表示
まずは下記をご覧ください。
動的な部分の為リストのコンテンツの数はわからないけど
数字の部分は変動させたい時に便利なのがCSSの変数になります。
こちらはJSの知識がなくてもCSSをコピペするだけなのでシンプルなコードになります。
<ol class="リストのクラス名">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>.リストのクラス名 {
counter-reset: count 0;// ここでカウントを取得
}
.リストのクラス名 li:before {
content: counter(count)"";// liを数える指示
counter-increment: count 1;// 1つずつカウントUP
}動的な作業もシステムの人にお願いせずに一人で完結できると
コーディングもスムーズに進行できるので覚えておきましょう。
コメントを残す