- ベストアンサー
ＣＳＳ：liで作成したメニューの一つだけ背景画像を変えたい
こんにちは。ページのメニューバーを<li>で作成していますが、 リンクがある<li>と、ない<li>で背景画像を変えたいのですが、<a:hover>の際の画像も別にしようと、背景画像を<a>で指定しまったため、どうしようかな、と行き詰りました。 ・【横並び】 ・【リンクあるなし別のボタン背景画像】 ・【hover時も背景画像チェンジ】 の３点をかなえるには、どのような記述がすっきりするでしょうか。ご意見。ご指摘・叱咤、お聞かせくださいませ。 ちなみに、作っておいて、へばった記述例が、以下です。 例）横並びのメニューボタン（メニュー１、２、３） ・メニュー１（閲覧しているページへのリンクボタンなので、リンクなし）→背景Ａ[../images/A.gif]、 ・メニュー２（他ページへのリンクボタン）→背景Ｂ[../images/B.gif]、hover時は背景Ｃ[../images/C.gif] ・メニュー３（メニュー２と同様） ----------------- ul#menu{ font-size: 12px; list-style-type:none; width:800; } ul#menu::after { visibility: hidden; clear: both; } ul#menu li{ float: left; width: 120px; list-style-type: none; display: inline; } ul#menu a{ color: #333; text-decoration: none; display: block; background-image: url(../images/B.gif); background-repeat: no-repeat; } ul#menu a:hover{ color: purple; text-decoration: underline; display: block; background-image: url(../images/C.gif); background-repeat: no-repeat; } -------------------
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
勉強する気はあるということで、以下実験してください。 <html><head> <style type="text/css"> <!-- /*この下で実験してね*/ --> </style> </head><body><ul> <li>123 <a href="*">4</a> <a href="*">5</a> <a href="*">6</a> <a href="*">7</a></li> <li>いろは<a href="*">に</a> <a href="*">ほ</a> <a href="*">へ</a> <a href="*">と</a> </li> <li> あいう<a href="*">え</a></li> <li>ＡＢＣ<a href="*">ｄ</a> <a href=*">Ｅ</a> <a href="*">Ｆ</a> <a href="*">Ｇ</a></li> <li>ねたぎれ<a href="*">おしまい</a> </li> </ul> </html> 何の指定もしていないＬＩです。 表示させて下さい。 これを横に並べるには、別ファイルか、ヘッダに li{float:left;}を指定します。 実験してください。 消してください。 li{display:inline;}でも、今は見た目は同じです。 実験してください。 消してください。 わかりにくいので罫線をつけてみます li{border:red 1px solid;} 実験してください。 消してください。 罫線をつけて、横に並べましょう li{ display:inline; border:red 1px solid; } リンク文字も扱いたいのでしたね a:link{ display:block; border:blue 1px solid; } を追加してください ね、別々に制御できるでしょ？広すぎる？ じゃあ、幅を指定しましょう。 width:100px; 追加してください どっちにたしたのかな？結果が違うはずです。 あ、この段階でinlineとfloatの表示に違いが出るはずです。 さっき a:link{ としていたのを a{ に変えてください それがリンクしているのと、指定していないのの違いです。 別に特別分ける必要はありません。 ｃｓｓだと a{ a:link{ 以上ヒントでした。 hoverもしたいって？ a:hover{backgrond:#ff2;} を追加。 どっかのつまみ食いをして回るより、基本から学んでください。これは、ＣＳＳの基本中の基本です。元のhtmlがしっかりしていたら、ｃｓｓで見た目なんてかなり変えられます。html部分がだめだと、どうしようもありません。最初はできるだけシンプルにして下さい。idやclassを出来るだけ削って記載する練習をして下さい。
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 表示部がない為どのようなのが理想なのか分からないですけど とりあえず・・・ ≪ボタンをイメージ画像化してjavascriptを使って画像変更≫ <input type="image" src="./sample0.gif" alt="リンク無"> <a href="./test0.html"><input type="image" src="./sample1.gif" alt="リンク１" onMouseover="this.src='sample2.gif'" onMouseout="this.src='sample1.gif'"><a> <a href="./test1.html"><input type="image" src="./sample1.gif" alt="リンク２" onMouseover="this.src='sample2.gif'" onMouseout="this.src='sample1.gif'"><a> ≪tablleを使って≫ <style type="text/css"> <!-- .b0 { width:120px; text-align:center; background-image: url("sample0.gif"); background-repeat: no-repeat; background-position: top center; } .b1 { width:120px; text-align:center; background-image: url("sample1.gif"); background-repeat: no-repeat; background-position: top center; text-decoration: none; } .b1:hover { text-align:center; background-image: url("sample2.gif"); background-repeat: no-repeat; background-position: top center; text-decoration: underline; } //--> </style> <table border="0"> <tr> <td class="b0">リンク無</td> <td><a href="test0.html" class="b1">リンク1</a></td> <td><a href="test1.html" class="b1">リンク2</a></td> </tr></table>
お礼
お返事ありがとうございます。最終目的から手法を探せば、様々な表現手法があるものですね。懇切丁寧に考えていただき、なおかつ、シンプルで「まさにこれ！」な回答に感謝しております。 私が行き詰った経由は、「まずはこうして」、「そこにこれを付け加えて」、「それにこれを反映するには？」と、行き当たりばったりな作成を手探りでしていたからです。 反省して、霧が晴れたような回答を参考にさせていただきたいと思います。そもそも、テーブル組みなしでボタンを配置させようとしたところに、越えられない壁があったように思います。壁を越えるには、まず基礎の勉強をしてから、ですね。 leap_day さんのように、引き出しが多くあると、目的から周りを見た際に選択肢がぽんぽんと浮かぶのでしょうね。回答以上に、もう反省の教えとして、ありがたく回答を拝んでおります。
お礼
うふふ。ご丁寧な回答をありがとうございます！日々基礎修練ですね。つまみ食いがばれてしまいましたね。つい、基本を学ぶより、実際に使ってみて中身を知る、でつきすすんでしまいました。 今回は、多量のボタン（背景＋文字の画像）をテーブル組みで配置していくのをやめ、文字は文字で、背景の３パターンの画像だけですまそうと、手を出した次第。 ただいま、li{display:inline;}は、縦並び？で、悶絶している途中ですが、そこを飛ばして、別々に制御できることは理解しました。ので、問題は解決の道が見えてきました。ありがとうございます。ご指導賜りましたこと、感謝いたします。また、非常に分かりやすい記述にしていただき、そちらもうれしく拝見させていただきました。