Categories: HTML&CSS

【CSS3】CSSカウンタで昇順や降順に採番する方法

CSSカウンタを実装するために必要な以下のプロパティ・関数
  • counter-resetプロパティ
  • counter-incrementプロパティ
  • contentプロパティ
  • counter関数

CSSカウンタで昇順に採番する

See the Pen
css-counter
by shiakisudev (@shiakisu)
on CodePen.

HTML

<h2>初めに</h2>
<h2>朝は〇〇をすべし</h2>
<h2>昼は〇〇をすべし</h2>
<h2>夜は〇〇をすべし</h2>
<h2>終わりに</h2>

CSS

body{
  counter-reset:num
}
h2::before{
  counter-increment:num;
  content:"第"counter(num)"章 ";
}

CSSカウンタで降順に採番する

See the Pen
css-counter-decrement
by shiakisudev (@shiakisu)
on CodePen.


以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp