- ベストアンサー
背景色を交互にしたいのですが・・・
- 背景色を交互に設定したい場合、HTMLやCSSを使用して背景色を指定し、奇数行と偶数行で異なる色を設定します。
- 具体的には、リスト要素などのテーブル以外の要素に適用する場合、nth-childセレクタを使用して奇数行と偶数行を指定します。
- ただし、テーブルの場合はCSSのnth-childセレクタではうまく動作しない場合があるため、代わりにnth-of-typeセレクタを使用する必要があります。
- yamyamya-m
- お礼率49% (78/158)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
yyr446です。 <script>を<head>に配置するのなら、 先頭行の (function(){ を window.onload = function(){ に変えて、最終行の })();</script> も }</script> に変えてください。それだけでうまくいくはずなのですが。
その他の回答 (3)
- yuu_x
- ベストアンサー率52% (106/202)
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)
サンプルです。 "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>
補足
何度もご回答いただき、ありがとうございます。 下記のようにやってみたのですが・・・。 <!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)
このソースを見る限り、li要素を1行に2こづつ配置して、偶数行のみ list01-oddクラスを最初から静的に指定していますね。 li要素を1個削除すれば、その行内のli要素がづれるだけで、class指定を 直さない限り、背景色はかわりません。 CSSとhtmlだけでも工夫すれば、出来るかも知れませんが、よいアイデアがでません。私ならjavascriptでやります。 対象ulを取得して、子li要素をfirstchirdからnextSiblingで順次参照し て、2個毎に背景色をセットしていく、処理をページロード時に実行させます。
お礼
回答いただき、ありがとうございます。 JavaScriptでやれれば一番いいのですが、当方まったくの初心者のため、苦戦中です＞＜ もしお時間に余裕がありましたら、もう少し詳しくご教授いただけたら幸いです。 どうぞよろしくお願いいたします。
補足
ありがとうございます！ 見事になりました（＾－＾）