• ベストアンサー

背景色を行ごとに変えるには?

お世話さまです。 以下において、 <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> ここで、「あああ」「いいい」行と、 「えええ」「おおお」行の色を、交互に変えたいのですが、どのようにすればよいでしょうか? ご回答よろしくお願いいたします。

  • HTML
  • 回答数5
  • ありがとう数2

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

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.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行づつの背景色変更スクリプトについては確か質問者様の以前の質問の回答文中にありましたので、そちらをご覧になってみて下さい。

yamyamya-m
質問者

お礼

大変わかりやすくお教えいただき、ありがとうございます。 はい、JavaScriptで奇数行と偶数行にわける方法が一番いいのかな、と思い始めたところでした。 あいにく今のデザインを変更することができないので、私もJavaScriptの知識はほとんど皆無に等しいのですが^^;ちょっと勉強してみようと思います。 ご丁寧にどうもありがとうございました。

その他の回答 (4)

noname#100277
noname#100277
回答No.4

リスト自体にidやclassで背景色を指定。 内部/外部/直接 ドレでも良いでしょう。

  • abril
  • ベストアンサー率69% (388/560)
回答No.3

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行毎に赤・青・赤…という背景色になります。

yamyamya-m
質問者

補足

ご回答ありがとうございます。 補足ですが、 「あああ」「いいい」 「えええ」「おおお」 において、「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。 もしお時間がありましたら、再度ご協力願えれば助かります、よろしくお願いいたします。

  • ts3m-ickw
  • ベストアンサー率43% (1248/2897)
回答No.2

リスト行全体の背景色を指定するのならこっち。 <li style="background-color: #0099FF"><a href="#">あああ</a></li>

yamyamya-m
質問者

お礼

たびたびのご回答ありがとうございます。 補足ですが、 「あああ」「いいい」 「えええ」「おおお」 において、「いいい」を消去した際、あくまで、「いいい」の文字列がなくなり、もともとあった背景色はそのままにしておく必要があるのです。 もしお時間がありましたら、再度ご協力願えれば助かります、よろしくお願いいたします。

  • ts3m-ickw
  • ベストアンサー率43% (1248/2897)
回答No.1

<li><a href="#"><span style="background-color: #0099FF">あああ</span></a></li> のようにしてみたらうまくいくんじゃないかな?

関連するQ&A

  • float横並びにしたブロックの中のul/liを縦並びにさせたい

    float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 (html) <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> (css) ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またsafari、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 *html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="#”></div> </div> <span id="menu"><ul><li><img src="#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li><li><img src=”#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li></ul></span> <h2><img src="#" alt="#" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ~~ ~~ </div> <div id="footer"> <span align="center">&copy;#</span> </div> </div> </body> </html> *css body { font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:30px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • Dreamweaverでリストを作成するとボックスからずれてしまいます

    DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。

  • <li>メニューの背景画像、IEだけ出ない

    どうぞよろしくお願いします。 あれこれやったのですが、なぜかwin IE7でだけ(IE6は未確認) メニューの背景画像(グラデーションを使ったもの)が表示できません。 モダンブラウザとmacでは確認しました。 今日一日悩んでるのですが、どうしても分かりません。 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="../css/01.css" rel="stylesheet" type="text/css"> </head> <body><div class="right">【ダミーテキスト】</div> <div id="menuarea"> <!--メニューエリア--> <ul id="menu"> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">あいうえお</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">かきくけこ</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">たちつてと</a></li> </ul> <ul id="bnr"> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> </ul> </div> <!--/メニューエリアここまで--> </body> </html> 【CSS】 .right { width:300px; float:right; border:1px solid red; } #menuarea { font-size:80%; width:168px; height:100%; } ul#menu { width:168px; margin-left:0px; padding-left:1em; padding-top:1em; padding-bottom:100px;/*メニュー下の余白*/ background:url(../common/menu-up.jpg)no-repeat;/*メニュー画像上部*/ } ul#bnr { width:168px; background:url(../common/menu-btm.jpg)no-repeat;/*メニュー画像下部*/ margin-left:0px; padding-left:0.7em; padding-bottom:10px; background-position:0 100%; }

    • ベストアンサー
    • HTML
  • XHTML+CSS フッターのcopyが2重になってしまいます

    XHTML+CSSでのホームページ作成で、 IE6のみフッター部分の下に、 Copyright 2008 ///////// All Rights Reserved.の erved.の部分が2重に表示されてしまいます。 どなたかご教授お願い致します。 *HTML <div id="footer"> <div id="footernavi"> <ul> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> </ul> </div> <p>Copyright 2008 ///////// All Rights Reserved.</p> </div> *CSS #footer { background: url(image/footer.gif) repeat; float: left; height: 70px; width: 710px; padding-top: 40px; padding-left: 40px; display: block; font-size: 12px; color: #333333; } #footernavi { height: 20px; width: 710px; float: none; line-height: 20px; } #footernavi ul { float: left; height: 20px; width: 710px; margin: 0px; padding: 0px; } #footernavi ul li { float: left; list-style-type: none; font-size: 12px; color: #333333; } #footernavi ul li a { list-style-type: none; font-size: 12px; color: #333333; text-decoration: none; }

    • ベストアンサー
    • HTML
  • CSSレイアウト positionについて

    下記のタグにてpositionタグを使って指定した場合 IEの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか? お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body {    margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px;       width:900px padding-bottom:10px; padding-top:10px; } HTML <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>

    • ベストアンサー
    • HTML
  • テキストの揃え方について

    CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }

    • ベストアンサー
    • CSS
  • CSSでポップアップメニューを作成したがIEだけメニューが表示されません。

    下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか?(JavaScriptは未使用で作成) <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 【CSS】firefoxで背景が表示されない-ナビゲーション(画像置換リンク)

    「li」に背景画像を指定して、ナビゲーションをつくってみたところ・・・ Firefox、Operaで表示されません。 (IEでは表示されます。) ヘッダー左にロゴ(これはどのブラウザでも表示される)、右側にナビゲーションを配置した作りです。 ハックなど色々調べてみたのですが、解決できず・・・。 力をお貸しいただけないでしょうか。 g_nav.gif・・・グローバルナビゲーション一枚画像550px×30px。(上部:ロールオーバー前、下部:ロールオーバー時) 【HTML】 <!--headerここから--> <div id="header"> <!--logoここから--> <div id="logo"> <h1><a href="aaa.html">logo</a></h1> </div> <!--logoここまで--> <!--naviここから--> <div id="nav"> <ul> <li id="nav01"><a href="aaa.html">あああ</a></li> <li id="nav02"><a href="aaa.html">あああ</a></li> <li id="nav03"><a href="aaa.html">あああ</a></li> <li id="nav04"><a href="aaa.html">あああ</a></li> <li id="nav05"><a href="aaa.html">あああ</a></li> </ul> </div> <!--naviここまで--> </div> <!--headerここまで--> 【CSS】 #header{ width:800px; height:70px; margin:0 auto; padding:0; } #logo { width:216px; height:70px; background-image:url(../cmn_img/logo.gif); float:left; } #nav{ width:550px; height:30px; float:right; margin:40px 0 0 0; padding:0; text-indent:-999em; } #nav ul{ margin:0; padding:0; list-style-type:none; } #nav li{ display:inline; } #nav li#nav01 a,#nav li#nav02 a,#nav li#nav03 a,#nav li#nav04 a,#nav li#nav05 a,{ display:block; background-image:url(../cmn_img/g_nav.gif); overflow:hidden; float:left; } #nav li#nav01 a{width:110px; height:30px; background-position:0 0;} #nav li#nav02 a{width:110px; height:30px;background-position:-110px 0;} #nav li#nav03 a{width:110px; height:30px;background-position:-220px 0;} #nav li#nav04 a{width:110px; height:30px;background-position:-330px 0;} #nav li#nav05 a{width:110px; height:30px;background-position:-440px 0;} #nav li#nav01 a:hover{width:110px; height:30px;background-position:0 -30px;} #nav li#nav02 a:hover{width:110px; height:30px;background-position:-110px -30px;} #nav li#nav03 a:hover{width:110px; height:30px;background-position:-220px -30px;} #nav li#nav04 a:hover{width:110px; height:30px;background-position:-330px -30px;} #nav li#nav05 a:hover{width:110px; height:30px;background-position:-440px -30px;} 【下記ハック使用】 #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header {display: inline-table;} /* Hides from IE-mac \*/ * html #header {height: 1%;} #header {display: block;} /* End hide from IE-mac */

    • 締切済み
    • CSS
  • 背景色を交互にしたいのですが・・・

    お世話になります。 <!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> (省略部分があります) 上記において、例えば「ううう」を削除した場合、「えええ」の文字列が背景色といっしょに移動するのですが、この際、「えええ」の文字列のみを移動させたいのです(つまり、背景色は固定させたい) お知恵を拝借できれば幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML