geta1972TweetPocketCheckwebシステムで、表組みをする場面が非常に多く、毎回javascriptでナンバリングしていたんですが、cssの機能だけでナンバリング表示ができるという事を知り、システムで使える仕様検証も含めてサンプルを掲載したいと思います。この手のサンプル掲載って、実は自分のコーディング・アンチョコとして残しているだけなので、説明不足の箇所があるかもしれませんが、そんな時はコメント残しておいてくだされ。</ol>12345<ol><li>Jan.</li><li>Feb.</li><li>Mar.</li></ol>最も簡単にナンバリングしたいのであれば、ol-liタグを使って、古くからのHTMLスタイルで行うのがいいでしょう。この場合のメリットは、旧式ブラウザでも利用できる上、ナンバリング以外でも、type=””として、数値以外のナンバリングが可能です。これを別のタグで実装したい場合は、以下のようなソースで対応できます。".";margin-right:10px;}</style>リスト方式の階層になっていることが条件ですが、親階層(数値リセット)とbefore(ナンバリング表示)でカウントアップすることができます。ちなみに、content要素に文字列を追加することで、任意の装飾を追加することも可能です。tableのように、2階層になっていない場合は以下のように書きます。"-";margin-right:10px;}</style>trを親にセットしてしまうと、すべての数値が”1′′になってしまうので、リスト階層を意識して行いましょう。まとめたソースをcodepenに載せておきました。".";margin-right:10px;}</style>“counter-reset”要素の変数の後ろに開始番号(-1した数)を挿入することで、途中スタートすることができます。これだとシステムで流用するのが難しいので、javascriptで開始数値を変更させてみました。CodePen.非表示は抜け番になる?この機能の非常に優れている点として、表示しているもののみのナンバリングを行ってくれる点です。途中を非表示にしてみると、以下のようになります。*:nth-child(2){display:none;}</style>いちいち調整する必要が無いのでかなりシステム的には便利です。複数のナンバリングを混載させることも可能で、以下のように記述できます。counter(num2);margin-left:10px;}</style>“counter-reset”に複数変数の登録と、途中開始値も同時に入れ込めます。うまくつかえば、9×9などの表組みをcssだけで作れるかもしれませんね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。