CSSのボックスの背景色を交互に変えたい

質問

CSSを使ったデザインで、ボックスを縦に並べたレイアウトをきっています。
（わかりやすい例で言うと、ポータルサイトによくあるお店一覧）
参考サイト：http://www.frontstyle.com/shopsearch/areaindex.php?mode=0&area=8

上記のサイトのように背景色を交互に変えていきたいのですが、
交互にCSSを変えていくと、削除したり、間に追加したりした時に不都合が生じます。

うまく、奇数はこの色、偶数はこの色みたいにできるやり方はあるのでしょうか？

お願い致します。

回答No.3

Yama-tani · ベストアンサー

cssではないのですが、css3の普及をを待つ間、jQueryというJavaScriptのライブラリーを使う手もあります。ｃｓｓのセレクターに表やリストの偶数行や奇数行を指定できるようになります。簡単な記述で、クロスブラウザでできますので、選択肢の1つにどうぞ。あっと、奇数・偶数は1からでなく0から始まるので普通の感覚とは逆となります。

少しのコードで実装可能な20のjQuery小技集
http://www.webcreatorbox.com/tech/jquery-tips20/

5番目のサンプルです。trをliやdiv、pなどに変えることぐらいはわかりますよね？
「odd」と「even」で奇数行偶数行ですが、元の指定もあるので、かたっぽで済むかな。興味がわいたら、jQueryをひとかじりしてみてください。

お礼

ありがとうございます！！
これは良さそうですね。

>>5番目のサンプルです。trをliやdiv、pなどに変えることぐらいはわかりますよね？

trの中にpやdivを置くってことでしょうか？
それとも別の事言ってます？？すいません

回答No.6

ORUKA1951

ですが、CSSだけでやろうとするとそれしかない。XSL(拡張スタイルシート)を使うと別だが・・

お礼

ありがとうございます。
CSSだけだと難しいんですね。;;

No.3のおっしゃってたjQueryを使ったやり方が無難ですかね

回答No.5

ORUKA1951

ボックスだろうがなかろうが・・
<div class="ProductList">
<p>あ</p>
<p>い</p>
<p>う</p>
<p>え</p>
・・・
</div>
CSS
div.ProductList p,
div.ProductList p+p+p,
div.ProductList p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p+p+p+p+p+p+p
{background-color:skyblue;}
div.ProductList p+p,
div.ProductList p+p+p+p,
div.ProductList p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p+p+p+p+p+p,
div.ProductList p+p+p+p+p+p+p+p+p+p+p+p+p+p+p+p+p+p
{background-color:pink;}

お礼

ありがとうございます。
このやり方だと、数がもっと多い場合であれば+pを増やしていかないといけないんですね？
やはり、偶数はこれ、奇数はこれのほうがスマートな気がしますが、
どうなんでしょう？

回答No.4

Yama-tani

>trの中にpやdivを置くってことでしょうか？
>それとも別の事言ってます？？すいません
すみません。忘れてください。

見本はtrに対応していますが、liなどでもできますよ。
だから、無理に表にしないでね、といいたかったのです。
かえって混乱させてしまいました。

お礼

ありがとうございます。
なんとなくわかりました。
つまり、親ボックスの中に子ボックスがある
こういうカタチであれば、liでもpでdivでもいいということですね。

連続するボックスの奇数偶数ということですね
試してみたいと思います！！

回答No.2

神崎 渉瑠（@taloo）

現状ではプログラムを作って、奇数偶数を判断しながらclassなどを指定する必要があります。
参考サイトではPHPで作っていると思います。

CSS3に対応したブラウザであれば、以下の記述で可能です。

<style>
tr{
background-color: red;
}
tr:nth-child(even) {
background-color: blue;
}
</style>

<table>
<tbody>
<tr><td>奇数</td></tr>
<tr><td>偶数=even</td></tr>
<tr><td>奇数</td></tr>
<tr><td>偶数</td></tr>
</tbody>
</table>

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

お礼

ありがとうございます！！

幅広い方への公開なので、と思いますが
CSS3も選択肢に入れてみます。

回答No.1

naokita

例のサイトは、
<TR BGCOLOR="#F3EFE6">を交互に入れているだけですね。
仰る通りCSSでも同じで、各classで指定するのが一般的ですが、
項目途中にでも１項目だけ増やしたりすると、
上下のどちらかのclassや指定を全部交互に毎回変更する必要がありますね。
また、
JSやPHPでループすればなんとかなるかもしれないけど、
わざわざプログラムを作ったり増やすのも面倒でしょうか・・・

じゃあ、シンプルに、
各項目の各高さを height: ○px; で固定する条件下で、
親ボックスに各色違いの背景画像を設置してリピートさせれば簡単かも。

１段目は別の色、
２段目は透過.GIFで背景色をそのまま表示（別色を付けてもOK）
※ この画像の高さは項目 ○px ×２倍の高さ。幅は適当に。
※ 子要素自体にはCSSで色を付けない事。

このCSSは、
#親ボックス{ background: #背景色 url(背景画像.gif);}

こうすれば、
各子要素の項目は、色指定やclass分けする必要すらなくなり、
１項目でも３項目でも途中に追加しても自動で色違いになるはずですが。

お礼

ありがとうございます！！

申し訳ございません、条件に付け忘れてしまいましたが、
ボックスの高さは固定ではないのです。

内容によっては大きくなるボックスもあれば、入れる内容が違ってちっちゃいボックスもあります。

その辺を考慮するとPHPまでいきますか。。＾＾；