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

解決済

質問者：yamyamya-m
質問日時：2009/09/18 11:27
回答数：4件

お世話になります。

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

（省略部分があります）

上記において、例えば「ううう」を削除した場合、「えええ」の文字列が背景色といっしょに移動するのですが、この際、「えええ」の文字列のみを移動させたいのです（つまり、背景色は固定させたい）

お知恵を拝借できれば幸いです。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4ベストアンサー

回答者： yyr446
回答日時：2009/09/24 18:02

yyr446です。

この回答への補足

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

補足日時：2009/09/29 11:48

通報する

- 0
- 件

通報する

No.3

回答者： yuu_x
回答日時：2009/09/20 04:02

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）は、スペース区切りで複数指定される可能性があります。その場合、== では引っかからない。= で代入すると、もともとつけられていたクラスを消してしまいます。

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2009/09/18 17:09

サンプルです。

"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>
とやってみたのですが、うまくいきません。
お忙しいかとは思いますが、添削していただければ幸いです。
どうぞよろしくお願いいたします。

補足日時：2009/09/24 09:53

通報する

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2009/09/18 13:56

このソースを見る限り、li要素を1行に2こづつ配置して、偶数行のみ

list01-oddクラスを最初から静的に指定していますね。
li要素を1個削除すれば、その行内のli要素がづれるだけで、class指定を
直さない限り、背景色はかわりません。
CSSとhtmlだけでも工夫すれば、出来るかも知れませんが、よいアイデアがでません。私ならjavascriptでやります。

対象ulを取得して、子li要素をfirstchirdからnextSiblingで順次参照し
て、2個毎に背景色をセットしていく、処理をページロード時に実行させます。