背景色を交互にしたいのですが・・・

2009/09/18 11:27

このQ&Aのポイント

背景色を交互に設定したい場合、HTMLやCSSを使用して背景色を指定し、奇数行と偶数行で異なる色を設定します。
具体的には、リスト要素などのテーブル以外の要素に適用する場合、nth-childセレクタを使用して奇数行と偶数行を指定します。
ただし、テーブルの場合はCSSのnth-childセレクタではうまく動作しない場合があるため、代わりにnth-of-typeセレクタを使用する必要があります。

背景色を交互にしたいのですが・・・

お世話になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>index03のページ</title> <style type="text/css"> body { background-color: #FFFFCE; background-image: url(); } .list01-odd { background-color: #FFEEEE; } .list02-odd { background-color: #EEFFEE; } a {color: #cc6600 } ul,li {padding:0; margin:0; line-height:1.3; font-size: 14px; font-weight: italic; } li a {text-decoration: none;} .blockAA {width:740px; background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left; width:340px; list-style:none; padding-left:30px; } .unnamed1 { font-size: 16px; color: #FF0000; font-style: italic; font-weight: normal; } .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } .style132 /* clearfix */ .blockAA ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> </head> <body> <br /> <table width="746" height="26" border="1" bordercolor="#9CCE39" bordercolorlight="#9CCE39" bordercolordark="#9CCE39" bgcolor="#9CCE39"> </table> <br /> </script> <span class="unnamed1">（あ行）</span> <div class="blockAA"> <ul class="hoge"> <li class="list01-odd"><a href="A073.htm">あああ</a></li> <li class="list01-odd"><a href="A017.htm">いいい</a></li> <li><a href="A069.htm">ううう</a></li> <li><a href="A043.htm">えええ</a></li> <li class="list01-odd"><a href="A080.htm">おおお</a></li> <li class="list01-odd"><a href="A077.htm">かかか</a></li> （省略部分があります）上記において、例えば「ううう」を削除した場合、「えええ」の文字列が背景色といっしょに移動するのですが、この際、「えええ」の文字列のみを移動させたいのです（つまり、背景色は固定させたい）お知恵を拝借できれば幸いです。よろしくお願いいたします。

yamyamya-m
お礼率49% (78/158)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2009/09/24 18:02 回答No.4

yyr446です。 <script>を<head>に配置するのなら、先頭行の (function(){ を window.onload = function(){ に変えて、最終行の })();</script> も }</script> に変えてください。それだけでうまくいくはずなのですが。

質問者

補足 2009/09/29 11:48

ありがとうございます！見事になりました（＾－＾）

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

yuu_x
ベストアンサー率52% (106/202)

2009/09/20 04:02 回答No.3

CSS3 対応ブラウザなら(Firefox3.1+, Safari3.1+, Chrome, Opera) li:nth-child(odd) { background-color : #FFEEEE; } li:nth-child(even) { background-color : #EEFFEE; } IE 7以前なら ol li { background-color : expression( this.value % 2 ? '#FFEEEE' : '#EEFFEE' ); } # ol に囲まれた li にのみ有効です。 # IE8 から expression のサポートを取りやめしまっているので、IE8以降ではどちらの方法も使えません。なるべく多くのブラウザでということでしたら、結局 li.even, li.odd クラスを作って地味に手書きしかないと思います。 ================================================================ # ちなみに <html> 要素直下に置けるのは、<body>、<head>、<frameset>のみで、<script>要素をおくことはできません。置くなら、</body>の前。 # class属性（className）は、スペース区切りで複数指定される可能性があります。その場合、== では引っかからない。= で代入すると、もともとつけられていたクラスを消してしまいます。

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2009/09/18 17:09 回答No.2

サンプルです。 "hoge"クラスの<ul>を対象にしています。下記を</body>の下につけておけば、よろしいかと <script type="text/javascript"> (function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list01-evn"; count=(count>2)?0:3; }else{ elment.className ="list01-odd"; count++; } } elment=elment.nextSibling; } } } })(); </script>

質問者

補足 2009/09/24 09:53

何度もご回答いただき、ありがとうございます。下記のようにやってみたのですが・・・。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>index03のページ</title> <style type="text/css"> body {background-color: #FFFFCE; background-image: url();} .list01-odd {background-color: #FFEEEE;} .list02-odd {background-color: #EEFFEE;} a {color: #cc6600} ul,li {padding:0;margin:0;line-height:1.3;font-size: 14px; font-weight: italic;} li a {text-decoration: none;} .blockAA {width:740px;background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left;width:340px;list-style:none;padding-left:30px;} .unnamed1 {font-size: 16px;color: #FF0000;font-style: italic;font-weight: normal;} .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } .style132 /* clearfix */ .blockAA ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> <script type="text/javascript"> (function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list01-evn"; count=(count>2)?0:3; }else{ elment.className ="list01-odd"; count++; } } elment=elment.nextSibling; } } } })(); </script> </head> <body> <br /> <table width="746" height="26" border="1" bordercolor="#9CCE39" bordercolorlight="#9CCE39" bordercolordark="#9CCE39" bgcolor="#9CCE39"> <tr> <td width="736" height="20" align="left" valign="middle" background="color01.gif">　<span class="style153">■</span>　<span class="style153">ーー業</span>　<span class="style153">■</span></td> </tr> </table> <br /> <span class="unnamed1">（あ行）</span> <div class="blockAA"> <ul class="hoge"> <li class="list01-odd"><a href="A073.htm">・あああ</a></li> <li class="list01-odd"><a href="A017.htm">・いいい</a></li> <li class="list01-even"><a href="A069.htm">・ううう</a></li> <li class="list01-even"><a href="A043.htm">・えええ</a></li> <li class="list01-odd"><a href="A080.htm">・おおお</a></li> <li class="list01-odd"><a href="A077.htm">・かかか</a></li> </ul> とやってみたのですが、うまくいきません。お忙しいかとは思いますが、添削していただければ幸いです。どうぞよろしくお願いいたします。

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2009/09/18 13:56 回答No.1

このソースを見る限り、li要素を1行に2こづつ配置して、偶数行のみ list01-oddクラスを最初から静的に指定していますね。 li要素を1個削除すれば、その行内のli要素がづれるだけで、class指定を直さない限り、背景色はかわりません。 CSSとhtmlだけでも工夫すれば、出来るかも知れませんが、よいアイデアがでません。私ならjavascriptでやります。対象ulを取得して、子li要素をfirstchirdからnextSiblingで順次参照して、2個毎に背景色をセットしていく、処理をページロード時に実行させます。

質問者