webシステムで、表組みをする場面が非常に多く、毎回javascriptでナンバリングしていたんですが、cssの機能だけでナンバリング表示ができるという事を知り、システムで使える仕様検証も含めてサンプルを掲載したいと思います。
この手のサンプル掲載って、実は自分のコーディング・アンチョコとして残しているだけなので、説明不足の箇所があるかもしれませんが、そんな時はコメント残しておいてくだされ。
cssで簡単にナンバリングするには？
<ol>
<li>Jan.</li>
<li>Feb.</li>
<li>Mar.</li>
</ol>
最も簡単にナンバリングしたいのであれば、ol-liタグを使って、古くからのHTMLスタイルで行うのがいいでしょう。
この場合のメリットは、旧式ブラウザでも利用できる上、ナンバリング以外でも、type=""として、数値以外のナンバリングが可能です。
これを別のタグで実装したい場合は、以下のようなソースで対応できます。
<div class="num-list">
<div>Apr.</div>
<div>May</div>
<div>June</div>
</div>
<style>
.num-list{
counter-reset: num;
}
.num-list > *{
padding-left:20px;
}
.num-list > *:before{
counter-increment: num;
content: counter(num) ".";
margin-right:10px;
}
</style>
リスト方式の階層になっていることが条件ですが、親階層（数値リセット）とbefore（ナンバリング表示）でカウントアップすることができます。
ちなみに、content要素に文字列を追加することで、任意の装飾を追加することも可能です。
さらにtableのように、２階層になっていない場合は以下のように書きます。
<table class="table-list">
<tr><td>July</td></tr>
<tr><td>Aug.</td></tr>
<tr><td>Sep.</td></tr>
</table>
<style>
.table-list{
counter-reset: num;
margin-left:20px;
}
.table-list td:before{
counter-increment: num;
content: counter(num) "-";
margin-right:10px;
}
</style>
trを親にセットしてしまうと、すべての数値が"1"になってしまうので、リスト階層を意識して行いましょう。
まとめたソースをcodepenに載せておきました。
See the Pen numbering by YugetaKoji (@geta1972) on CodePen.
ページャーなどの場合、途中開始するには？
<div class="num-list">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
</div>
<style>
.num-list{
counter-reset: num 3;
}
.num-list > *{
padding-left:20px;
}
.num-list > *:before{
counter-increment: num;
content: counter(num) ".";
margin-right:10px;
}
</style>
"counter-reset"要素の変数の後ろに開始番号（-1した数）を挿入することで、途中スタートすることができます。
ただ、これだとシステムで流用するのが難しいので、javascriptで開始数値を変更させてみました。
<div class="num-list">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
</div>
<style>
.num-list{
counter-reset: num;
}
.num-list > *{
padding-left:20px;
}
.num-list > *:before{
counter-increment: num;
content: counter(num) ".";
margin-right:10px;
}
</style>
<javascript>
var numList = document.querySelector(".num-list");
numList.style.setProperty("counter-reset","num 10","");
</javascript>
See the Pen numbering-2 by YugetaKoji (@geta1972) on CodePen.
非表示は抜け番になる？
この機能の非常に優れている点として、表示しているもののみのナンバリングを行ってくれる点です。 途中を非表示にしてみると、以下のようになります。<div class="num-list">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
</div>
<style>
.num-list{
counter-reset: num;
}
.num-list > *{
padding-left:20px;
}
.num-list > *:before{
counter-increment: num;
content: counter(num) ".";
margin-right:10px;
}
.num-list > *:nth-child(2){
display:none;
}
</style>
いちいち調整する必要が無いのでかなりシステム的には便利です。
複数対応と数値以外の対応
複数のナンバリングを混載させることも可能で、以下のように記述できます。<div class="num-list">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
</div>
<style>
.num-list{
counter-reset: num num2 10;
}
.num-list > *{
padding-left:20px;
}
.num-list > *:before{
counter-increment: num;
content: counter(num) ".";
margin-right:10px;
}
.num-list > *:after{
counter-increment: num2;
content: "." counter(num2);
margin-left:10px;
}
</style>
"counter-reset"に複数変数の登録と、途中開始値も同時に入れ込めます。
うまくつかえば、9x9などの表組みをcssだけで作れるかもしれませんね。
※計算結果はjsで行うことになりそうですが・・・calcを使ってできるかもね・・・
See the Pen numbering-4 by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿