- ベストアンサー
リスト項目でのメニュー作成
リスト項目を使い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>
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
誤解があるといけないので・・・ 最近のブラウザならこれでいけます <style> ul#menu li:first-child a{ background-color: #ff0000; } </style> <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> ただし、IE6辺りではfirst-child疑似クラスが使えないため behavior:expression()構文で、first-childという名前の クラスを付加しているわけです。 スタティックに書くなら <style> ul#menu li.first-child a{ background-color: #ff0000; } </style> <ul id="menu"> <li class="first-child"><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> としておけばブラウザ依存もだいぶ解消できるとおもいますよ
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
＞INCLUDE VIRTUAL できないとは言いませんが、なにかと面倒ですね。 であれば、CGIでhoge.php?page=1 のような引数をわたして、メニューもそのpageをみつつ classを設定するような仕組みにするのが妥当だと思いますよ
補足
ありがとうございます。CGIで引数をわたすというのは、具体的な方法が思いつかないので、自分のスキルでは無理そうです。もう一つ分からない点がありますので、よろしければ、アドバイスください。このメニューに背景画像を着ける場合の画像の高さはどう設定すればよいのでしょうか？当然かもしれませんが、22pxで画像を作ってもサイズが合いません。そもそも、line-heightで高さを設定しているのが、まずいのでしょうか？
- Chary_spy
- ベストアンサー率40% (75/183)
あなたの作り方を尊重して、menuをclass名にして階層構造にする事です。 ul.menu li a:hover { background-color: black; color: #black; } li#b a:hover { background-color: red; color: white; } </style> </head> <body> <ul class="menu"> <li id="b">
補足
ありがとうございます。menuをclass名にして、li#b a:hoverとすることで希望のとおりとなりました。ただ、質問の趣旨とは逸れるかもしれませんが、すべてをidで指定すると、li#b a:hoverの文字色は問題ないのですが、背景色は有効になりません。これはなぜでしょうか？あまり理解できていませんが、lassとidの使い分けの問題でしょうか？ また、そもそも、このメニューの記述自体今ひとつでしょうか？
- yambejp
- ベストアンサー率51% (3827/7415)
たんにメニュー１にclassを設定してやればよいような気がしますが・・・ まぁこんな風でも <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{ behavior:expression( this.className+=(this.parentNode.getElementsByTagName('li')[0]==this)?" first-child":"" ) } ul#menu li:first-child a,ul#menu li.first-child a { background-color: #ff0000; } 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>
お礼
ありがとうございます。リストの0に対して指定をするということなのですね。参考になりました。また、classで指定する方が簡単なのですね。
お礼
ありがとうございます。first-childのブラウザ依存の件、一応は理解できたと思います。参考になりました。
補足
補足で扱うべきではないかもしれませんが、よろしければ、アドバイスください。上記のメニューを1つのファイルとして、INCLUDE VIRTUALなどで、各ページに読み込む形にした場合、現在のページを認識してそのメニュー部の背景色を変えさせるとことは、cssだけでは無理なのでしょうか？