- ベストアンサー
background-colorとcolorについて
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
SEO関連の内容だと思いますが、#1さんの回答もあるように ロボットの評価はそれほど気にすることはないと思います。 また原則ulにはli以外の要素は入りませんから、liで背景色と文字色を 変えていればとくにユーザーにとって不利益もないでしょう。 ただし、ulの背景色を変えるくらいなら、ベースになるdivを設けて そこに背景色をのせる方が妥当だと思いますがいかがでしょうか？ （XMLにうるさい人は、無駄な構造を設定するなというでしょうけど）
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞これってスパムになりますか？ この場合のスパムとは、検索エンジンスパム - Wikipedia ( http://ja.wikipedia.org/wiki/%E6%A4%9C%E7%B4%A2%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3%E3%82%B9%E3%83%91%E3%83%A0 )のことですね。 原則として、SEは、CSSは読まない。
お礼
ご回答ありがとうございます。
関連するQ&A
- :focus,:first-childが効かない
のですがこれはie6だからでしょうか? ちなみにWidowsMe ie6を使っています <style type="text/css"> input:focus { background-color:black; } a:hover { color:white; background-color:black; text-decoration:none; } li { border-top:solid 1px #ccc; } li:first-child { border-top:none; } </style> <input type="text"/><br/> <a href="#">xxxx</a><br/> <ul> <li>ab</li> <li>cd</li> <li>ef</li> <ul>
- ベストアンサー
- HTML
- jQuery プルダウンメニュー
プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。
- 締切済み
- JavaScript
- jQuery 背景のフェード
下記のliの背景色をフェードイン・アウトする方法は ありますでしょうか？ $("li").hover(function(){ $(this).css("background-color","#000000"); },function(){ $(this).css("background-color",""); }); <ul> <li><a href="#"><img src="xxx.png" /></a><li> <li><a href="#"><img src="xxx.png" /></a><li> </ul> 宜しくお願いします。
- 締切済み
- JavaScript
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- リスト項目でのメニュー作成
リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- background-colorの塗りつぶし
footer部分の「background-color」と「border」の調整がうまくいきません…。 ページ全体の幅は、960pxあります。 CSSのフッター部分に #footer { clear: both; width: 954px; background-color: #BFCFFF; padding: 3px; } IE9、Firefox11、Chrome18で確認しました。 結果は、添付ファイルのようになりました。 ・Firefox11、Chrome18 …上記CSSのwidthを954、padding: 3px; を実行すれば、 Firefox11、Chrome18で確認した所、添付ファイル(1)の結果になり、 正しく表示されます。 ・IE9 …上記CSSのwidthを954、padding: 3px; を実行すれば、 IEでは、添付ファイル(2)の結果になり、borderとbackgroundcolorの間に 隙間(濃い青色)が残ってしまいます。 質問 IE9、Firefox11、Chrome18全てで、濃い青色背景を出さずに、 全てを正しく塗りつぶす((1)の結果)にはどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- ナビゲーション表示のCSSについて質問させて下さい。
ナビゲーション表示のCSSについて質問させて下さい。 本を参考に以下のようなソースを試しているのですが、各メニューの幅を統一するためにはどうしたらいいのでしょうか？ 試しにと、width: 200px;として、li内に設定したりしていますが、変わる気配がありません。 /*css*/ ul{ list-style: none; text-align: center; margin: 30px 0px; color: #fff; } li{ display: inline; white-space: nowrap; } li a{ text-decoration: none; padding: 10px 10px; color: #fff; background: transparent; background: #f60; } li a:hover { color: #fff; background: #fc0; } ～html～ <ul> <li><a href="A.html">項目Ａ</a></li> <li><a href="B.html">項目Ｂ</a></li> <li><a href="C.html">項目Ｃ</a></li> <li><a href="D.html">項目Ｄ</a></li> <li><a href="E.html">項目Ｅ</a></li> </ul> お恥ずかしい質問かと思いますが、アドバイスのほど頂戴できたら幸いです。 お忙しいなか恐縮ですが宜しくお願い申し上げます。
- ベストアンサー
- HTML
- background-color: #ddd;の意味がわかりません
あるサイトの「body」の背景に以下のようなCSSがありました。 body { background-color: #ddd;←これ何の意味？ color: #333; background: url(●●/●●Bg.gif) repeat; } 『background-color: #ddd;』の意味が ネットで探してもそれらしいものが見つかりませんでした。 なにか、制作した人の独自のものなんでしょうか？ わかる方要らしたら教えていただけないでしょうか。
- ベストアンサー
- HTML
- css li に入れ子で適用する範囲
HTML の li にｃｓｓを適用する場合ですが 下のように入れ子の場合 A行に #aaaaa {background-color:yellow;} B行に #bbbbb {background-color:pink;} B行の部分だけはピンクになりますが A行の入れ子部分は黄色です このような入れ子状態で、A行一行のみ黄色にすることはできますか A行の下の <ul>に対して、別の cssを適用するなど なにか方法があれば教えてください よろしく、お願いします <ul> <li>1st item</li> <li>2nd item <ul> <li>2 - 1</li> <li id="aaaaa">2 - 2 ...A行 <ul> <li id="bbbbb">2 - 2 - 1</li> ...B行 <li>2 - 2 - 2</li> <li>2 - 2 - 3</li> </ul> </li> <li>2 - 3</li> </ul> </li> <li>3rd item</li> </ul>
- ベストアンサー
- ホームページ作成ソフト
- リスト表示がうまくいきません IEの問題なのか？
メニュのナビを下記のHTML及びCSSで表現しています 私のパソコンでは問題なく表示しました OS:WinXP Chrome/firefox/IE8 先日友達のパソコンで見るとこのメニューナビが右に長いのです 「お問合わせ」の横にもメニューナビの背景色が続いています 友人のパソコンは OS:WinVista IE7 他の条件では検証してないのでわかりませんが… OS:WinVista が問題なのか？ IE7 が問題なのか？ 例えば問題であれば解決策はあるのでしょうか？ アドバイスいただけないでしょうか？ ---------------------------------------------------------- <div id="menu"> <ul class="menu_navi"> <li><a href="./index.php">ホーム</a></li> <li><a href="./tv.php">テレビ番組</a></li> <li><a href="./info.php">いろいろな情報</a></li> <li><a href="./mail.php">お問合わせ</a></li> </ul> </div> ---------------------------------------------------------- #menu { width: 100%; border-left: 1px solid white; overflow: hidden; } ul.menu_navi{ height: 50px; margin: 0px; position: relative; float: left; left: 50%; color: white; border-bottom: 5px solid black; background-color: red; } ul.menu_navi li{ float: left; position: relative; float: left; right: 50%; border-right: 1px solid white; display: block; } ul.menu_navi li a{ height: 40px; width: 239px; padding: 10px 0px 0px; color: white; border-bottom: 5px solid black; font-size: 18px; font-weight: bold; text-decoration: none; display: block; text-align: center; background-color: red; vertical-align: middle; line-height: 140%; } ul.menu_navi li a.nowthis{ border-bottom: 5px solid white!important; } ul.menu_navi li a:hover{ padding: 10px 0px 0px; border-bottom: 5px solid red; color: red; background-color: white; }
- ベストアンサー
- HTML
お礼
ご回答ありがとうございました。 参考にさせていただきます。