![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
CSSを使ったデザインで、ボックスを縦に並べたレイアウトをきっています。
(わかりやすい例で言うと、ポータルサイトによくあるお店一覧)
参考サイト:http://www.frontstyle.com/shopsearch/areaindex.p …
上記のサイトのように背景色を交互に変えていきたいのですが、
交互にCSSを変えていくと、削除したり、間に追加したりした時に不都合が生じます。
うまく、奇数はこの色、偶数はこの色みたいにできるやり方はあるのでしょうか?
お願い致します。
No.3ベストアンサー
- 回答日時:
cssではないのですが、css3の普及をを待つ間、jQueryというJavaScriptのライブラリーを使う手もあります。
cssのセレクターに表やリストの偶数行や奇数行を指定できるようになります。簡単な記述で、クロスブラウザでできますので、選択肢の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.5
- 回答日時:
ボックスだろうがなかろうが・・
<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
- 回答日時:
>trの中にpやdivを置くってことでしょうか?
>それとも別の事言ってます??すいません
すみません。忘れてください。
見本はtrに対応していますが、liなどでもできますよ。
だから、無理に表にしないでね、といいたかったのです。
かえって混乱させてしまいました。
ありがとうございます。
なんとなくわかりました。
つまり、親ボックスの中に子ボックスがある
こういうカタチであれば、liでもpでdivでもいいということですね。
連続するボックスの奇数偶数ということですね
試してみたいと思います!!
No.2
- 回答日時:
現状ではプログラムを作って、奇数偶数を判断しながら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-p …
No.1
- 回答日時:
例のサイトは、
<TR BGCOLOR="#F3EFE6">を交互に入れているだけですね。
仰る通りCSSでも同じで、各classで指定するのが一般的ですが、
項目途中にでも1項目だけ増やしたりすると、
上下のどちらかのclassや指定を全部交互に毎回変更する必要がありますね。
また、
JSやPHPでループすればなんとかなるかもしれないけど、
わざわざプログラムを作ったり増やすのも面倒でしょうか・・・
じゃあ、シンプルに、
各項目の各高さを height: ○px; で固定する条件下で、
親ボックスに各色違いの背景画像を設置してリピートさせれば簡単かも。
1段目は別の色、
2段目は透過.GIFで背景色をそのまま表示(別色を付けてもOK)
※ この画像の高さは項目 ○px ×2倍の高さ。幅は適当に。
※ 子要素自体にはCSSで色を付けない事。
このCSSは、
#親ボックス{ background: #背景色 url(背景画像.gif);}
こうすれば、
各子要素の項目は、色指定やclass分けする必要すらなくなり、
1項目でも3項目でも途中に追加しても自動で色違いになるはずですが。
![「CSSのボックスの背景色を交互に変えたい」の回答画像1](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/a/364189_5497f0307a07c/M.jpg)
ありがとうございます!!
申し訳ございません、条件に付け忘れてしまいましたが、
ボックスの高さは固定ではないのです。
内容によっては大きくなるボックスもあれば、入れる内容が違ってちっちゃいボックスもあります。
その辺を考慮するとPHPまでいきますか。。^^;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Visual Basic(VBA) マクロ実行時、自動で背景色を変えたい。 C列にあるチェックボックスをチェックするとB列に「TRUE」 4 2022/11/08 11:14
- Visual Basic(VBA) 昨日、質問した件『VBA にて、条件付き書式で背景色を設定しているセルの範囲で、背景色付きのセルをカ 4 2022/04/07 14:39
- Excel(エクセル) エクセルでの色付け 5 2022/10/09 18:58
- HTML・CSS ワードプレスで太字が反映されません PC(MacBook)の画面上には、太字は反映されるのに、スマホ 3 2022/12/18 18:56
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
行間隔の開け方
-
テプラの文字を大きくしたいで...
-
レポート2000字程度なら何文字...
-
Wordで勝手に文字サイズが変わる?
-
ワードのヘッダーの文字について
-
ブログ記事を投稿したら勝手に...
-
gooブログ記事HTML入力でsupとs...
-
2KB~4KBって何文字ですか?
-
印刷物の文字数の目安
-
Thunderbirdで返信の引用文が改...
-
大学のレポート A4で1枚レポー...
-
FC2ブログでカレンダーが表示...
-
ランキングバナー2つを 横に...
-
字が細くなってしまった・・・
-
目がチカチカするので、良い色...
-
Gmailの表示文字を大きくする方...
-
ベビカム日記を製本したいので...
-
記事の文字サイズを固定する方...
-
掲示板の背景色について
-
ページによって文字が重なって...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのボックスの背景色を交互に...
-
SelenuimのBy.CssSelectorによ...
-
ホームページビルダー/EXCELの...
-
htmlでtableの中の文字を真ん中...
-
テプラの文字を大きくしたいで...
-
レポート2000字程度なら何文字...
-
つぶれた文字
-
Wordで勝手に文字サイズが変わる?
-
Gmailの表示文字を大きくする方...
-
大学のレポート A4で1枚レポー...
-
Thunderbirdで返信の引用文が改...
-
ワードのヘッダーの文字について
-
Facebookの文字を大きくする方法
-
大学の講義が始まり、講義後に...
-
謎の文字記号 これどうなって...
-
「Andoroidスマホ、Gmailで 文...
-
Excelに入力しているタグ<br>...
-
2KB~4KBって何文字ですか?
-
Wordでのレポート、文字数行数...
-
Macのメニューバーの文字サイズ...
おすすめ情報