- ベストアンサー
CSSでの画像メニューの設定について
- CSSで画像を使用したリンクメニューの設定方法を確認したいです。
- 提供されたCSSコードとHTMLコードをもとに、指定の画像を表示するメニューを作ろうとしています。
- 現在の知識では設定に無駄があるかもしれませんが、具体的な問題点が分かりません。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<ul> <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> </ul> <ul id="navi">←idを付ける <li><a href="index.html" title="トップページ">トップページ</a></li> <li><a href="work.html" title="仕事内容">仕事内容</a></li> </ul> idをつければ<ul>内のタグの指定が簡潔になります。(classでもいいです。) 文字を消すことが目的であれば「#navi a{display:none;}」とすれば簡潔です。これで<span>タグを省くことが出来てスッキリします。 で、この状態のときにページONとOFFのスタイル別けはどうするんだということになりますが、さらに上の要素のbodyにidをつけるとページごとにスタイルを分けることが出来ます。 <body id="index"> <ul id="navi">←idを付ける <li class="navi_on"><a href="index.html" title="トップページ">トップページ</a></li> <li><a href="work.html" title="仕事内容">仕事内容</a></li> </ul> </body> #index #navi .navi_on{---------スタイル---------}にスタイルを指定すればトップページのnavi_onだけにスタイルを指定できます。 bodyにidをつけることによってトップページのONは赤、仕事ページのON時は青という風にページごとに簡潔に切り替えることもできるようになっていいです。 コツとしては大きなまとまりのタグから順番にidやclassをつけて、それでも指定できないときは次のタグに付けていくことです。それでもムリなら、タグを増やすなど。 ＞＞今の私の知識ではどこが悪いのか分からないので、 教えて頂けると幸いです。 悪いことはないですよ。記述が増えてしまって少々修正するときに大変になりそうだなというくらいでそれほど気にされるほどではないです。 共通部分を見つけて width:102px; height:43px; ↑たとえばコノ箇所 「.navi01 a」に指定してあるので、「.navi01_on a」・「.navi01 a:hover」・「.navi01_on a:hover」先ほどの通り、ul#naviに指定して、 #navi li a{ width:102px; height:43px; } という風にすればul#navi内の<li>の中の<a>はすべて適応されるので、記述する行を省略できます。 という感じで、役に立ちましたかねぇ？？ ■■えー、最後に参考になるような本などですか・・・ん～。 ・Web標準デザインテクニック即戦ワークブック：http://www.amazon.co.jp/Web%E6%A8%99%E6%BA%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%E5%8D%B3%E6%88%A6%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%96%E3%83%83%E3%82%AF%E2%80%95XHTML%2BCSS%E3%82%92%E6%AD%A3%E3%81%97%E3%81%8F%E8%B3%A2%E3%81%8F%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE15%E5%95%8F-Web-designing-books-Cederholm/dp/4839916292/ref=sr_1_27?ie=UTF8&s=books&qid=1207754026&sr=8-27 ・このサイトというよりはコノ方（この方の出している本は良いですね）：http://www.cybergarden.net/ 前者はサンプルブックで、CSSの有効利用の道を切り開いたといっても過言でない方の本。各パーツごとのスタイルのサンプルが載っていて良いですよ。 後者もWeb標準の第一人者の日本人。技術者向けな内容の本ですが、オススメです。
その他の回答 (2)
- elcude
- ベストアンサー率72% (32/44)
> これだとテキストが非表示になるだけではなくて、<a>そのものが存在しない状態になってしまうのでNGだと思いますが…？ ■たしかに、ANo.2さんのおっしゃるとおり文字を残しておきたい場合には#navi a{display:none;}ではなく、#navi a{text-indent:-10000px;}という風な方法で記述することもあります。 質問されたkoma122さんはおそらく消すことが目的であると思っていたので、その質問にあわせてそう回答しましたが、ANo.2のおっしゃるようにしたいのであれば後者にします。
お礼
補足ありがとうございました。 そうです、私の希望しているのは一時的な非表示になります。 質問の仕方がよくなく、失礼致しました。
- abril
- ベストアンサー率69% (388/560)
横やりで失礼しますが、 ANo.1 > 文字を消すことが目的であれば「#navi a{display:none;}」とすれば簡潔です。 これだとテキストが非表示になるだけではなくて、<a>そのものが存在しない状態になってしまうのでNGだと思いますが…？
お礼
補足ありがとうございました。
お礼
御礼が遅くなりまして申し訳ございません。 ご丁寧にありがとうございました！ 色々と勉強になりました。 紹介頂いた方の本も、ぜひ見てみたいと思います。