- ベストアンサー
ブラウザ表示で変な場所にリンクがつく問題の解決方法
- ブラウザ表示すると、変な場所にリンクがついてしまう問題が発生しています。
- 画像を置き換えることで、リンクがつかないようになりました。
- ナビゲーションを画像にして横並びにしたいという要望があります。
- bigheadracket
- お礼率53% (15/28)
- CSS
- 回答数3
- ありがとう数10
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
簡単なソースですが、 ・最初の方法は、はるかに簡単ですし、画像を読み込まない場合も適切に表示されます。 ・二番目の方法は画像を読み込ませない場合読めません。 いずれの方法を使っても、:hoverや:active、:visitedで画像を変化させるロールオーバーが可能。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) オプションでCSS3を選択する <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- div{clear:left;} div.nav{ width:950px;margin:0 auto; height:48px; line-height:48px; text-align:center; } div.nav ul,div.nav ul li{ display:block;padding:0;list-style:none; margin:0;padding:0; } div.nav ul li{float:left;} div.nav ul li+li{margin-left:3px;} #home{width:148px;background-image:url(images/home.gif);} #price{width:135px;background-image:url(images/price.gif);} #catalog{width:154px;background-image:url(images/catalog.gif);} #access{width:135px;background-image:url(images/access.gif);} #reserve{width:155px;background-image:url(images/reserve.gif);} div.nav ul li a{display:block;text-decoration:none;} div.nav ul li a:link{color:transparent;}/* CSS3 */ div.nav ul li a span{display:none;}/* CSS2.1にするときはa内のテキストを<span></span>で囲み上の行を消す */ --> </style> </head> <body> <h1>サンプル</h1> <div class="nav"> <ul> <li><a href="#"><img src="images/home.gif" width="148" height="48" alt="Home"></a></li> <li><a href="#"><img src="images/price.gif" width="135" height="48" alt="Price"></a></li> <li><a href="#"><img src="images/catalog.gif" width="154" height="48" alt="Catalog"></a></li> <li><a href="#"><img src="images/access.gif" width="135" height="48" alt="Access"></a></li> <li><a href="#"><img src="images/reserve.gif" width="155" height="48" alt="Reserve"></a></li> </ul> </div> <div class="nav"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="price">Price</a></li> <li><a href="#" id="catalog">Catalog</a></li> <li><a href="#" id="access">Access</a></li> <li><a href="#" id="reserve">Reserve</a></li> </ul> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
★aはインライン要素なので、中身がなけりゃ見えません。せいぜい半角スペース分かな。 display:block;width:100%;height:100%; ＞text-indent:-9999px; ＞float:left; よく見かける書き方ですが、ユーザビリティ上もSEO的にもとてもまずい方法です。たとえば画像読み込みを停止している人にはまったく見えなくなります。 ★今回のような場合は、そのまま画像をリンクで囲んでも、まったく問題ありません、どころか正しい方法です。 <li><a href=""><img src="images/home.gif" width="148" height="48" alt="Home"></a></li> ★あるいは、次善の策として・・ <li><a href=""><span>Home</span></a></li> ★スタイルシートに重複したプロパティがあります。 height:48px; margin:0px; padding:0px; margin:0px; padding:0px; background-repeat:no-repeat; display:block; これらは一度しか書く必要はありません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^カスケーディングを使います。--カスケーディングスタイルシートを使うのですから・・
お礼
ご回答いただき ありがとうございます。 参考になりました。 ありがとうございます!
- naokita
- ベストアンサー率57% (1008/1745)
#navi { width:950px;height:48px;} #navi ul,#navi li { margin:0; padding:0;list-style:none;height:48px;} #navi li { float:left;width:135px;} #navi li a { display:block; text-indent:-9999px; overflow: hidden; text-align: left; width:100%; height:100%; background:no-repeat 50% 50%; } #navi li a#home {background-image:url(images/home.gif);} #navi li a#price {background-image:url(images/price.gif);} #navi li a#catalog {background-image:url(images/catalog.gif);} #navi li a#access {background-image:url(images/access.gif);} #navi li a#reserve {background-image:url(images/reserve.gif);} #navi li a:hover {background-image:url(http://cmm001.goo.ne.jp/img/logo/goo.gif) !important;} ------------------- 画像の大きさが均等じゃないようだから面倒そうだけど、 marginを利用するのはお勧め出来ない。 その他の調整は、 <li><a href="#" id="home">Home</a></li> では無く、 <li id="home"><a href="#">Home</a></li> して、listを個別で幅指定で調整とか・・・ その場合は、#navi li a#home → #navi li#home a に変更だけど。
お礼
ご回答いただき ありがとうございます。 参考になりました。 ありがとうございます!
お礼
ご回答いただき ありがとうございます。 参考になりました。 ありがとうございます!