リスト表示しているものに順番を付けたいって時に使える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等のプログラムで対応する必要はありません。


«前の記事：アドベンチャーゲームでVim操作を覚えよう！「VIM-Adventures」jQueryで指定の要素内の入力値を一括取得する方法：次の記事»