css3

CSSでナンバリングを表示する方法



リスト表示しているものに順番を付けたいって時に使えるCSSだけでナンバリングを行う方法をご紹介。

今回はul、liタグを使用して簡単にCSSでナンバリングを実現しています。
<style>
#sample{
    /* カウンタリセット */
    counter-reset:sample;
}

#sample li:before {
    /* カウンタ インクリメント */
    counter-increment:sample;
    /* カウンタ表示 */
    content:counter(sample) "位 ";
}
</style>
<ul id="sample">
	<li>Java</li>
	<li>PHP</li>
	<li>Ruby</li>
	<li>C#</li>
	<li>C++</li>
</ul>
上記のCSSだけで下記のようにナンバリングが実現されます。
  • Java
  • PHP
  • Ruby
  • C#
  • C++

カウンタのリセットをulタグで行ってliタグでインクリメントを行っています。
応用すればulやliタグ関係なく、カウンタの値を使って表示することが可能です。

今回は応用でコンテンツの左上に順番が表示されるようにしました。
<style>
#ranking {
    counter-reset: sample-ranking;
    list-style: none;
}
#ranking li { padding: 1px }
#ranking li:before {
    color: #ffffff;
    content: counter(sample-ranking,decimal);
    counter-increment: sample-ranking;
    text-align: center!important;
    opacity: .999;
    z-index: 1;
    background-color: #5F5F5F;
    border-radius: 2px;
    -moz-border-radius: 2px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    float: left;
}
.sample_content {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid;
}
</style>
<ul id="ranking">
	<li><div class="sample_content">AAA</div></li>
	<li><div class="sample_content">BBB</div></li>
	<li><div class="sample_content">CCC</div></li>
	<li><div class="sample_content">DDD</div></li>
	<li><div class="sample_content">EEE</div></li>
</ul>
  • Java
  • PHP
  • Ruby
  • C#
  • C++

これでCSSのみで順番を付けることが出来ます。
わざわざ、Javascript等のプログラムで対応する必要はありません。


コメントを残す