CSSカウンタで項番を降順に自動採番する

Posted on by IKIX_wbdv

　連続するリストを作るとき，先頭にIDを振りたくなります．上から1，2…と振るならCSSカウンタで充分です．

body {
  counter-reset: h3count;     /* 'h3count' という名前のカウンターを設定し、 0 で初期化する。 */
}

h3::before {
  counter-increment: h3count; /* h3count カウンターの値に1を加算 */
  content: counter(h3count);  /* h3count カウンターの値を表示 */
}

　このCSSにより，h3の先頭に，1つ目から順に1，2…と項番が振られます．しかし，項番を逆順つまり上が大きく，下にずれるにしたがって1へと小さくなる項番を，CSSカウンタで実装する方法はないのでしょうか．今回はそれを実現するお話です．
　方法は，display: flex;で，flex-direction: column-reverse;を利用します．

    <body>
	<h3>ひとつめ</h3>
	<h3>ふたつめ</h3>
	<h3>みっつめ</h3>
	<h3>よっつめ</h3>
	<h3>いつつめ</h3>
    </body>

　このHTML構造に，先ほどのCSSに追記した下記CSSを当てます．なんと，flexを加えるだけです．

body {
  counter-reset: h3count;     /* 'h3count' という名前のカウンターを設定し、 0 で初期化する。 */
  display: flex;
  flex-direction: column-reverse;
}

h3::before {
  counter-increment: h3count; /* h3count カウンターの値に1を加算 */
  content: counter(h3count);  /* h3count カウンターの値を表示 */
}

　これで，以下のような出力が得られます．

5いつつめ
4よっつめ
3みっつめ
2ふたつめ
1ひとつめ

　HTMLの順と逆順に表示されるところは分かりにくく難点ですが，これで最新項目を追記しても，新たに項番が振られます．もし降順昇順を並べ替えたければ，flex-directionの値をcolumn-reverseからcolumnに変えるだけです．お試しください．