THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
CSS
jquery
javascript
ストライプ

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

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

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

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



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

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

■HTMLソース

<ul>
    <li class="list01-odd">リスト1</li>
    <li class="list01-even">リスト2</li>
    <li class="list01-odd">リスト3</li>
    <li class="list01-even">リスト4</li>
    <li class="list01-odd">リスト5</li>
</ul>

■CSS

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

■プレビュー

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

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

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

方法へ移る前に

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

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

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

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
</ul>

方法1

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

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

■設定ソース

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

■プレビュー

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

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

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

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

方法2

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

■設定ソース

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

■プレビュー

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

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

方法3

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

■設定ソース

<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>

■プレビュー

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6
  • リスト7
  • リスト8
  • リスト9
  • リスト10

これは、高校の時の数学で勉強したであろう数列の応用。

1、4、7、10・・・の部分に該当するのは「3n-2
2、5、8、11・・・の部分に該当するのは「3n-1
3、6、9、12・・・の部分に該当するのは「3n

と、該当する部分を「:nth-child(数式)」を使って設定できる。
これを応用すれば、数種類の色分けも可能である。

ちょっと余談

タイトルに「綺麗に」なんてつけているわりに、
なんだか色分けがうまくいかなかったかも。。。

ソース的に綺麗にってことで許してください。



この記事へのコメント
はじめまして。
jQueryはまだ使ったことがないので、こちらで勉強させていただこうと思います。
あと、リストが閉じ忘れではないですか?

Posted by らぶ at 2008年06月11日
>らぶさん
はじめまして!コメントありがとうございます。
といっても、僕はらぶさんのブログをいつも読ませていただいています。
Twitterもフォローしていただき、ありがとうございます。

jQueryは僕も勉強中ですが、その勉強のことをここの載せるようにしています。
参考になるようでしたらぜひまた見てください。

リストの閉じ忘れのご指摘もありがとうございます!
サンプル表示していたHTMLの方で閉じ忘れしていたようですね。
先ほど修正しておきました。
Posted by ハム at 2008年06月11日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。