CSSでテーブル型メニューの背景色を変える方法

前へ 次へ
このQ&Aのポイント
  • CSSを使ってテーブル型のメニューの背景色をマウスオンで変えたいのですが、うまくいきません。
  • CSS解説のウェブページを見たのですが、どこが間違っているのか分かりません。
  • ご教授いただける方がいらっしゃいましたら、お願いします。
回答を見る
  • ベストアンサー

CSSを使いたいのですが上手くいきません

テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>

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

  • ベストアンサー
回答No.1

以下でどうでしょう。 <div id="***">のときは、 div#*** と書くようです。 <!-- div#container{ width:100px;} div#container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} div#container ul li{ margin:0; padding:0; display:inline;} div#container ul li a{ margin:0; padding:5px 0; /* width:180px; */ display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} div#container ul li a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} -->

shibachuta2
質問者

お礼

有難うございました 無事、狙ったとおりにできました 本当に助かりました。 恥ずかしながら、まだまだCSS等分かっておりませんので またご質問することがあるかもしれませんが その時は、また宜しくお願い致します。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • CSSの継承について...

    CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li　で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます） 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？ それとも根本的な何かを履き違えしているのでしょうか？ 宜しくお願い致しますm(_ _)m

  • スタイルシートでのメニュー作成で

    今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■　CSS　■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■　HTML　■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • IE以外で:hoverの内容が無視されてしまう

    独学でCSSを勉強している者です。 ちょっと躓いてしまったのでどなたかお知恵を貸してください。 下記のように指定しています。 IE6ではちゃんとhover時に背景色が変わるのですが、 opera,firefoxで動作確認したところいずれもうまく動作しませんでした。 どこが間違っているのか分からず、困っています。 御指摘頂けると助かります。 ---------------- pagelist.htmlの内容 ---------------- <ul class="comout"> 　<li class="comrow compar">ページリスト 　　<ul class="comin"> 　　　<li class="comrow"><a href="001.html">1</a></li> 　　　<li class="comrow"><a href="002.html">2</a></li> 　　</ul> 　</li> </ul> ---------------- 001.htmlの内容 ---------------- <ul class="comout"> 　<li class="comrow compar">ページリスト 　　<ul class="comin"> 　　　<li class="comrow comself"><a href="001.html">1</a></li> 　　　<li class="comrow"><a href="002.html">2</a></li> 　　</ul> 　</li> </ul> ---------------- スタイルシート ---------------- ul.comout{ padding:0px; margin:0px 0px 20px 0px; } ul.comin{ padding:0px; margin:0px 0px 0px 10px; } li.compar{ display:block !important; padding:5px; margin:0px; } li.comrow{ display:inline; color:#395158; list-style-type:none; text-decoration:none; } li.comrow a:link{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } li.comrow a:visited{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } }li.comrow a:hover{ background-color:#D1C9BD; border:1px #EFECE7 solid; text-decoration:none; color:#395158; } li.comself a{ background-color:#D1C9BD !important; border:1px #EFECE7 solid !important; } --------------------------- 以上です。 いままでIEのみで動作確認をしてきたため、 今回のような自体にどう対応して良いのか分かりません。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS 横並びリストの書き方はどちらがよいでしょうか

    スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css"> <!-- /* リスト：インライン ------------------------------------------------------------ */ #yoko1 li { display: inline; } #yoko1 a { display: block; float:left; } #yoko1 li { list-style-type: none; margin:0 5px; } #yoko1 a { padding: 5px 10px; margin: 5px; text-decoration:none; border:1px solid #CCFF33; } #yoko1 a:hover { background-color:#CCCCFF; } #yoko2 { clear:left; } /* リスト：ブロック ------------------------------------------------------------ */ #yoko2 li { display: block; float:left; } #yoko2 a { display:block; } #yoko2 li { list-style-type:none; margin:0 5px; } #yoko2 a { padding: 5px 10px; text-decoration:none; border:1px solid #CCFF33; } #yoko2 a:hover { background-color:#CCCCFF; } --> </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSでマウスオーバーを作成しています。

    CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで文法エラーが出ました

    CSS素人です、 CSS Validator検証結果で下記エラーが出ました、IE6・IE7・IE8・firefoxでは表示は崩れませんが 下記エラーを無くしたいのですがどなたかご指導いただけませんでしょうか？ #mnu1 img 　文法解析エラーが発生しました @vertical-align:text-bottom; #mnu1 img　 Parse error - Unrecognized } .td01 文法解析エラーが発生しました @border-width : 1px 1px 1px 1px; 文法解析エラーが発生しました : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a CSS記述は以下の通りです ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); text-decoration : none; background-repeat : no-repeat; outline: none; display : block; width : 108px; height : 40px; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; margin-bottom : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; 　vertical-align:text-bottom; } .td01{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #dce6f4; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; 　border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #c1cdde; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; 　border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} ※ #mnu1 img内の　vertical-align:text-bottom;は 縦にメニューを並べているのですが各上下に隙間が入るので vertical-align:text-bottom;を入れたら隙間が無くなったので 使用した次第です。 以上、宜しくお願いします。

  • ＣＳＳで思うようにいかないところがあります。

    現在ＣＳＳ勉強中の初心者です。 ＣＳＳを使って、ナビゲーションシステムを作ろうと、本に書いてある通り、打ち込んでみたのですが、borderで囲まれた部分を1行にしたいのですが、なぜか、2行になってしまっているようです。上の行には表示させたい文字が書かれているのですが、下の行が空欄になってしまって、スペースができてしまいます。ＣＳＳの書き方が悪いのでしょうか？解決方法を教えてください。うまく説明できなくてわかりにくいかもしれませんが、宜しくお願いいたします。 ＣＳＳは以下です。 #nav { margin: 0px; padding: 0px; list-style: none; float:left; width:100%; } #nav li { float:left; background-color:#f0f0f0; border: 1px solid #000; font-size:12px; text-align:center; width:160px; height:20px; margin-top:1px; margin-right:0px; margin-left:3px; } #nav a{ color:#000; width:170px; height:20px; display:block; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; height:20px; } HTMLは以下です <ul id="nav"> <li><a href="">ホーム</a></li> <li><a href="">Gallery</a></li> <li><a href="">プロフィール</a></li> <li><a href=""></a>お問い合わせ</li> </ul>

    • ベストアンサー
    • HTML
  • CSSを使用したHPの左メニューとフッターについて

    CSSを使用したホームページを作成しています。 左メニューとメインコンテンツ部分があります。 2点ほど、ご教授頂けますと幸いです。 1.左メニューの背景色について 現在、左メニューの背景色がメニュー周りのみとなっています。 これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。 2.ブラウザのサイズ縮小によるフッターの表示について 現在、フッターを常に最下部で表示するように対応してみた所です。 ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。 こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？ 以下ソースとなります。 宜しくお願い致します。 HTML --------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="test.css" type="text/css" /> <title></title> </head> <body> <div id="container"> <div id="header"> </div> <div id="main"> <div class="category"> <h1>テスト</h1> <div class="entry_body"> 本文本文本文本文本文本文本文本文本文本文本文本文 </div> </div> </div> <div id="side"> <div class="category"> <h3>メニュー</h3> <ul> <li><a href="../test1/">test1</a></li> <li><a href="../test2/">test2</a></li> <li><a href="../test3/">test3</a></li> <li><a href="../test4/">test4</a></li> <li><a href="../test5/">test5</a></li> </ul> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- CSS --------------------------------------------------------------- html, body { height: 100%; font-size:80%; line-height: 140%; letter-spacing:1px; color: #333333; background-color:#cccccc; text-align: center; margin: 0px auto; padding: 0px; } a:hover { text-decoration: none; } #container { width:900px; min-height:100%; height:auto !important; height:100%; position: relative; margin: 0px auto; background-color:#FFFFFF; text-align: left; } #header { border-top:#003366 solid 10px; margin: 0px 0px 0px 0px; clear:both; } #main { float:right; width:688px; background: #FFFFFF; margin: 0px 5px 0px 0px; padding: 0px 0px 0px 0px; display: inline; } #main .category { width:688px; margin: 0px 0px 15px 0px; } #main h1 { font-size:105%; border-left:#003366 solid 6px; border-bottom:#cccccc solid 1px; height:17px; font-size:120%; font-weight:bold; margin: 10px 10px 10px 10px; padding: 11px 10px 10px 20px; } #main .entry_body { margin: 15px 24px 15px 24px; padding: 0px 0px 0px 0px; } #main ul { margin: 0px 30px 0px 28px; padding: 0px 0px 10px 0px; } #main ol { margin: 0px 30px 0px 35px; padding: 0px 0px 10px 0px; } #main li { line-height: 140%; margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; } #side { float:left; font-size:12px; width:200px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background:#336699; color:#FFFFFF; } #side .category { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; } #side h3 { color:#FFFFFF; background:#003366; font-size:12px; text-align:left; font-weight:bold; margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; border:#6699cc 1px solid; } #side .entry_body { margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; background: #6699cc; } #side ul { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; background: #6699cc; } #side li { line-height: 120%; list-style:none; margin: 5px 0px 5px 0px; border:#336699 1px solid; } #side li a, #side li a:link, #side li a:visited { color:#FFFFFF; text-decoration:none; display:block; padding: 10px 10px 10px 10px; } #side li a:hover { color:#333333; background:#99ccff; text-decoration: none; padding: 10px 10px 10px 10px; } #footer { width:900px; height:10px; background:#003366; margin: 0px 0px 0px 0px; position: absolute; bottom: 0; } ---------------------------------------------------------------

    • ベストアンサー
    • HTML
  • スタイルシートの横並びリスト中央配置について

    #Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する