- ベストアンサー
背景色を行ごとに変えるには？
お世話さまです。 以下において、 <style type="text/css"> ul,li {padding:0; margin:0; line-height:1.3;} .blockAA {width:740px;} .blockAA ul {width:740px;} .blockAA ul li {float:left;width:340px;list-style:inside;padding-left:30px;} /* 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> </body> </html> <div class="blockAA"> <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> <li><a href="#">えええ</a></li> <li><a href="#">おおお</a></li> <li><a href="#">かかか</a></li> <li><a href="#">ききき</a></li> <li><a href="#">くくく</a></li> <li><a href="#">けけけ</a></li> <li><a href="#">こここ</a></li> </ul> </div> ここで、「あああ」「いいい」行と、 「えええ」「おおお」行の色を、交互に変えたいのですが、どのようにすればよいでしょうか？ ご回答よろしくお願いいたします。
- yamyamya-m
- お礼率49% (78/158)
- HTML
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
No.3です。 > 「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。 今の構造のままでは単なる静的なHTMLで「自動的に」そうするのは無理ですね。 理由は、その様にしたいのであれば、文字列を入れるコンテナと背景色を指定するコンテナを分けておかねばならず、且つ後者（背景色を指定するコンテナ）の子要素として前者（常に均等な2列にする為に幅を指定した文字列のコンテナ）を2つセットで入れておける様な構造が必要になるからです。 しかし、現在の構造はアイテムの増減に関わらず2列を維持するのを <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> （省略） </ul> という様に、それぞれの文字列が1つづつliというコンテナの中に入れる事で成り立っている為、liを2つセットで格納して背景色を指定できる様な親要素が存在できません。 依って、現在の構造を維持するならば、アイテムの増減に伴い背景色を指定するclass属性も手作業で差し替えるのは必須となります。 HTML側の構造を変えればご要望に近いことをするのも不可能ではありませんが、その場合の問題がいくつかあります。 ・論理構造上、これらの文字列が「ひとつづきのリスト」が適切なのであれば、HTML側は変えるべきではない。 ・上記の条件がクリアできる様な内容であったとしても、その場合は結局アイテムの増減が発生した箇所から下のアイテムは、文字列を含む最小単位のコンテナごとの移動という手作業が必須となり、結局（現在の構造でclass属性の方を差し替えるのとたいして変わらず）煩雑。 単純な例でいうと、現在の構造を”以下の様に変えられる様な内容であれば”、できる事はできるんですよ。 【CSS】 .blockAA ul { （省略） background: #fcc; } .blockAA ul.highlight { background: #ccf; } 【HTML】 <div class="blockAA"> <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> </ul> <ul class="highlight"> <li><a href="#">ううう</a></li> <li><a href="#">えええ</a></li> </ul> （省略） <ul> <li><a href="#">こここ</a></li> </ul> </div> 上記であれば、背景色変更の指定が親要素ulの方にできる為、li単位でのアイテムの移動をしても見た目上の1行毎の背景色は保持されます。 つまりこういう事です： <div class="blockAA"> <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> </ul> <ul class="highlight"> （元々あった「ううう」をliごと削除） <li><a href="#">えええ</a></li> <li><a href="#">おおお</a></li>←「おおお」をliごと移動 </ul> （以下、liごとにひとつづつ上にずらして行く） （省略） </div> まあアイテムが20個ぐらいならその都度手作業のメンテナンスをしても許容範囲かなと想いますが、50個も100個もあったら「非常に」煩わしい思いをする事になりますね。そういった場合は、「（そこのスタイルが重要な意味を持つのでなければ）メンテナンスに支障の出ないデザインに変更する」か、何らかの手段で自動化した方が良いでしょうね。ただ、「見た目」だけでなく「実質」1行づつ（つまりli単位で1アイテムづつ、ということ）交互に、という事であればJavaScriptとかで「奇数行」「偶数行」をカウントして処理を振り分ける、というのが簡単にできるのですが（テーブルの行が交互に背景色を変えているやつなんかによくそういう仕組みが用いられます）、質問者様の場合は実質2行づつのアイテムを見せかけで1行にして、スタイルを変えなければならないのはその見せかけの数毎ですから、そうなるとちょっと簡単じゃないかもしれません。 JavaScriptマスターではないので詳細はわかりかねますが… ＃「実質」の1行づつの背景色変更スクリプトについては確か質問者様の以前の質問の回答文中にありましたので、そちらをご覧になってみて下さい。
その他の回答 (4)
リスト自体にidやclassで背景色を指定。 内部/外部/直接 ドレでも良いでしょう。
- abril
- ベストアンサー率69% (388/560)
HTML（だけ）では自動で交互にする事はできませんので、この場合はliの背景色のみを変えたclassセレクタを設けて、1行（2リストアイテムづつ）毎にclass属性を指定してはいかがですか。その方がHTML側の記述をシンプルにできますので。 以下は一例です。 ＃修正・追加部分のみ。 【CSS】 .blockAA ul li { （省略） background: #fcc; } .blockAA ul li.highlight { background: #ccf; } 【HTML】 <div class="blockAA"> <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> <li class="highlight"><a href="#">えええ</a></li> <li class="highlight"><a href="#">おおお</a></li> <li><a href="#">かかか</a></li> <li><a href="#">ききき</a></li> <li class="highlight"><a href="#">くくく</a></li> <li class="highlight"><a href="#">けけけ</a></li> <li><a href="#">こここ</a></li> </ul> </div> 上記のサンプルでは、class属性を指定していないliの背景色は#fcc、class="highlight"を記述したliの背景色は#ccfになりますので、1行毎に赤・青・赤…という背景色になります。
補足
ご回答ありがとうございます。 補足ですが、 「あああ」「いいい」 「えええ」「おおお」 において、「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。 もしお時間がありましたら、再度ご協力願えれば助かります、よろしくお願いいたします。
- ts3m-ickw
- ベストアンサー率43% (1248/2897)
リスト行全体の背景色を指定するのならこっち。 <li style="background-color: #0099FF"><a href="#">あああ</a></li>
お礼
たびたびのご回答ありがとうございます。 補足ですが、 「あああ」「いいい」 「えええ」「おおお」 において、「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。 もしお時間がありましたら、再度ご協力願えれば助かります、よろしくお願いいたします。
- ts3m-ickw
- ベストアンサー率43% (1248/2897)
<li><a href="#"><span style="background-color: #0099FF">あああ</span></a></li> のようにしてみたらうまくいくんじゃないかな？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
大変わかりやすくお教えいただき、ありがとうございます。 はい、JavaScriptで奇数行と偶数行にわける方法が一番いいのかな、と思い始めたところでした。 あいにく今のデザインを変更することができないので、私もJavaScriptの知識はほとんど皆無に等しいのですが＾＾；ちょっと勉強してみようと思います。 ご丁寧にどうもありがとうございました。