リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法

2008/06/11

カテゴリ：: jQuery

タグ：: CSS; jquery; javascript; ストライプ

綺麗にストライプ状に色分けする方法

リストとかテーブルをストライプ状に色分けしようとするとき、
セルとか列に対して一つ一つクラスをつけて、
そしてCSSで装飾するのが一般的だと思います。

でも、クラスを一つ一つにつけていくのって面倒じゃないですか？

今回紹介する方法を使えば、
簡単かつ綺麗に色分けすることができるので、
参考にしてみてください

面倒なやり方：一つ一つにクラスをつけていく

まずはオーソドックスに、
一つ一つにクラスをつけて行く方法を紹介しておきます。

■HTMLソース

<ul>
    <li class="list01-odd">リスト１</li>
    <li class="list01-even">リスト２</li>
    <li class="list01-odd">リスト３</li>
    <li class="list01-even">リスト４</li>
    <li class="list01-odd">リスト５</li>
</ul>

■CSS

li.list01-odd {
    background-color:#cce5ff;
}
li.list01-even {
    background-color:#ffffff;
}

■プレビュー

リスト１
リスト２
リスト３
リスト４
リスト５

数が少ない場合は上記のようにしてもいいのですが、
数の多い場合、例えばリストが１００個とか、
テーブルセルがものすごく多いとか、
そんな場合にclassを設定しているのって面倒ですよね。

では、簡単な方法にいってみましょう！

方法へ移る前に

これから紹介する方法は、全てjQueryを使います。
なので、jQueryを使えるように設定をしておきましょう。

jQueryを使えるようにしておくには、
「Google AJAX Libraries APIを利用しよう！」を読んで、
HTMLを編集しておいてください。

そして、以降使うHTMLは以下のようにします。

<ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
    <li>リスト４</li>
    <li>リスト５</li>
</ul>

方法１

「jQuer基礎：ベーシックフィルターを学ぶ」で勉強したように、
「:even」「:odd」を使います。

「:even」「:odd」を使って、自動的にclassを設定します。

■設定ソース

<script type="text/javascript">
$(document).ready(function(){
    $("li:even").addClass("list02-odd");
    $("li:odd").addClass("list02-even");
});
</script>

■プレビュー

リスト１
リスト２
リスト３
リスト４
リスト５

CSSは先ほどと同じのを利用しています。
classを自動的につけていくので、一つ一つにわざわざつけなくてよくなり、
作業効率的にもかなり楽になることでしょう。

ポイントは、「:even」になっているところにつけるクラスが「odd」で、
「:odd」になっているところにつけるクラスが「even」になっていることです。

「jQuer基礎：ベーシックフィルターを学ぶ」でも勉強しましたが、
「:even」のスタートは０番目からになります。
リストなどの最初は０番目と偶数だとみなされるのを忘れずに。

方法２

先ほどは自動的にclassをつけていくようにしたのですが、
それだとCSSも設定しなくてはならないので、その分は少し手間です。
なので、classをつけて行くのではなく、
自動的にCSSを変化させていくソースにしてみます。

■設定ソース

<script type="text/javascript">
$(document).ready(function(){
    $("li:even").css("background-color","#e0efff");
    $("li:odd").css("background-color","#ffffff");
});
</script>

■プレビュー

リスト１
リスト２
リスト３
リスト４
リスト５

個人的には先ほどの方法の方が好きなのですが、
好みや用途によって変化させてみてください。

方法３

偶数奇数だけでなく、３色のストライプにしてみる方法も紹介します。

■設定ソース

<script type="text/javascript">
$(document).ready(function(){
    $("li:nth-child(3n-2)").css("background-color","#e0efff");
    $("li:nth-child(3n-1)").css("background-color","#ffe5e5");
    $("li:nth-child(3n)").css("background-color","#edffdb");
});
</script>