[css] リストの順番をcssで採番

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

webシステムで、表組みをする場面が非常に多く、毎回javascriptでナンバリングしていたんですが、cssの機能だけでナンバリング表示ができるという事を知り、システムで使える仕様検証も含めてサンプルを掲載したいと思います。
 

この手のサンプル掲載って、実は自分のコーディング・アンチョコとして残しているだけなので、説明不足の箇所があるかもしれませんが、そんな時はコメント残しておいてくだされ。
 

cssで簡単にナンバリングするには?

 


 

最も簡単にナンバリングしたいのであれば、ol-liタグを使って、古くからのHTMLスタイルで行うのがいいでしょう。
 

この場合のメリットは、旧式ブラウザでも利用できる上、ナンバリング以外でも、type=””として、数値以外のナンバリングが可能です。
 

これを別のタグで実装したい場合は、以下のようなソースで対応できます。
 

 


 

リスト方式の階層になっていることが条件ですが、親階層(数値リセット)とbefore(ナンバリング表示)でカウントアップすることができます。
 

ちなみに、content要素に文字列を追加することで、任意の装飾を追加することも可能です。
 

さらにtableのように、2階層になっていない場合は以下のように書きます。
 

 


 

trを親にセットしてしまうと、すべての数値が”1″になってしまうので、リスト階層を意識して行いましょう。
 

まとめたソースをcodepenに載せておきました。
 

See the Pen
numbering
by YugetaKoji (@geta1972)
on CodePen.

ページャーなどの場合、途中開始するには?

 


 

“counter-reset”要素の変数の後ろに開始番号(-1した数)を挿入することで、途中スタートすることができます。
 

ただ、これだとシステムで流用するのが難しいので、javascriptで開始数値を変更させてみました。
 

 


 

See the Pen
numbering-2
by YugetaKoji (@geta1972)
on CodePen.

非表示は抜け番になる?

この機能の非常に優れている点として、表示しているもののみのナンバリングを行ってくれる点です。
 

途中を非表示にしてみると、以下のようになります。
 

 


 

いちいち調整する必要が無いのでかなりシステム的には便利です。

複数対応と数値以外の対応

複数のナンバリングを混載させることも可能で、以下のように記述できます。
 

 


 

“counter-reset”に複数変数の登録と、途中開始値も同時に入れ込めます。
 

うまくつかえば、9×9などの表組みをcssだけで作れるかもしれませんね。
※計算結果はjsで行うことになりそうですが・・・calcを使ってできるかもね・・・
 

See the Pen
numbering-4
by YugetaKoji (@geta1972)
on CodePen.


 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です