• ベストアンサー

CSSを利用して、特定のリンクや画像を非表示にしようと思っています。

CSSを利用して、特定のリンクや画像を非表示にしようと思っています。 img[src="画像URL"] {display:none !important;} a[href^="URL"]{display:none !important;} これで、Opera、Firefox、Safariではできたのですが、 IE6ではできません。 IE6で有効な方法を教えてください。

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

子供・隣接・属性などのセレクタは、IE6以下は未対応です。 非常に便利なのですが、 IE6シェアがまだ10%以上あると言われていますので、使えません。 IE6撲滅運動もあるようですが、シェア1%程度になるには、 おそらく、2014年以降になると思います。 それまでは、 id や class を割り当てて対応するか、IE6以下を無視するかしかありません。 ---------------------------------- 方法は、知っている思いますが、 個別に対応するしかないでしょう。一応書いておきます。 <a href="/" class="del">消える</a> <img src="test.gif" width="50" height="50" alt="*" id="del" /> #del , .del{display:none !important;} -------------------------- ハックや分岐させても良いですが。

Para-days
質問者

お礼

回答ありがとうございました。 CSSといっても、こちらはサイト制作者ではなく、閲覧者で、 ユーザーCSSを利用するつもりでした(IE6は普段使わないのですが)。 IE6だとユーザーjavascriptはデフォで使えないはずですし、 CSSでもこの指定ができないとなると、IE6での対応は諦めた方が良さそうですね。

関連するQ&A

  • firefoxではcssで画像をプリロードができません

    リンクの貼られた画像に触れると画像が変化させようと 以下のコードを使ってみました。 IE、Operaではできたのですがfirefoxではもともと表示されてるはずの画像も触れたときに表示される画像も表示されません。 何かやり方があるのでしょうか? ■html <p class="xxx"><a href="#">sample</a></p> ■css p.xxx{ background:url("img01/a_img.gif") no-repeat; } p.xxx a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px; } p.xxx a:hover{ background:none; }

    • ベストアンサー
    • CSS
  • CSSでポイント時に画像を消す?

    JavaScriptを使わずにCSSを用いて、 マウスカーソルを画像に合わせたときに 画像が消えるようにしたいのですが、 可能ですか? <a href="#"><img src=""></a> a:active img, a:hover img { display:none: } としてみたんですが カーソルを合わせると画像が点滅してしまい うまく表示できませんでした。 よろしくお願いします。

  • cssの画像切り替え

    宜しくお願いします。 cssでのhoverを使った画像の切り替えを教えてください。 ○html <dl id="dl">  <dt id="dt"><a href="#"><img src="img/image1.jpg" alt="" /></a></dt>  <dd>あ</dd> </dl> ○css #dl     {     width: 170px;     height: 170px;     margin: 0;     } #dt a     {     text-decoration: none;     } #dt a:hover { background-image: url(img/image2.jpg); text-decoration: none;     } というソースで、cssを使い画像を切り替えたいのですが、できません。 html指定で、<img src="~">で画像を表示させておき、 切り替える方法としましては、hoverを使いbackground-imageを使うしかないと思います。 background-imageからbackground-imageへの切り替えは、できるのですが、今回の場合は、どうしてもhtml指定で、<img src="~">からの切り替えを行いたいです。 そもそも、html指定の、<img src="~">で画像を表示する場合、cssで切り替えれるものなのでしょうか? 出来る限り、cssでの切り替えをしたいと考えています。 どなたか、分かる方お願いします。

    • ベストアンサー
    • HTML
  • リンクの有無を判別して画像の表示/非表示を自動で行いたい

    リンクの有無を判別して画像の表示/非表示を自動で行いたい こんにちは。 いつもお世話になっております。 <a href="リンクURL"><img src="画像URL"></a> このようなタグで画像リンクを貼り、hrefのURLの値が空欄("")でない場合、画像をdisplayで非表示にするJavaScriptを組もうとしています。 ボタン等は使用せず、ページの読み込みと同時に実行させたいです。 リンクURLはPHPの別プログラムを使用し変数で呼び出しています。 <JavaScript> function nolink(){ if(document.aaa.link01.href != ""){ document.aaa.gazou.style.display = 'block'; } else{ document.aaa.gazou.style.display = 'none'; } } <BODY> <body onload="nolink()"> <form name="aaa"> <a href="{変数}" name="link01"><img src="abc.jpg" name="gazou"></a> </form> このような記述を行いましたが、オブジェクトを指定してください、というエラーが出てしまいました。 色々なサイト様を参考に試してみましたが、上手く動作せず完全に行き詰ってしまいました。 どなたかご教授下さい。 質問内容に不備がありましたら申し訳ございません。 よろしくお願い致します。

  • 画像にリンクを張ったら、レイアウトが崩れました。

    ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。 まず、リンクを張らずにやってみました。 HTML部分 <ul id="main_center"> <li id="1"><img src="http://***.jpg" /></li> <li id="2"><img src="http://***.jpg" /></li> <li id="3"><img src="http://***.jpg" /></li> </ul> CSS部分 #main_center #1,#2,#3 { display: block; width: 220px; height: 20px; list-style-type: none; margin-bottom: 10px; } タグは以上の通りでやったところ、問題なく画像が綺麗に並んだのですが、 <ul id="main_center"> <li id="1"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="2"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="3"><a href="http://***/"><img src="http://***.jpg" /></a></li> </ul> といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。 リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。 または、なにかタグが間違っているのでしょうか。 どなたかアドバイスをお願いいたします。

    • ベストアンサー
    • HTML
  • リンクで違うページの指定箇所へ飛ばそうとしています。

    リンクで違うページの指定箇所へ飛ばそうとしています。 IEやsafariでは問題なく指定箇所に飛ぶのですが、 Firefoxだと何故か指定箇所ではなく、そのページの一番下に飛んでいきます。 IEは6、7、8 safariは4.0.2で、 Firefoxは3.6.6を使用しています。 Firefoxのバグなのでしょうか? (同じページ内の指定箇所だとちゃんと飛びます) 急ぎの為大変困っております。 ご回答お願い致します。 HTML-------------------------------------------------------------- <a href="http://~~~/●●.html#abc" /> 飛ばしたい場所 <div id="abc"> <img src="画像URL" border="0" alt="" /> </div>

  • css 画像の一部分をリンクにしたいです

    画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>

    • ベストアンサー
    • CSS
  • Macfirefox3とMacfirefox2以下でCSSを切り替えたい

    MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい! ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }

  • 画像にリンクを貼るにはどうしたら?

    フォレストでサイト制作をしている途中なのですが、画像にリンクを貼る方法がわからなくて困っています。 調べてみて、 <a href="移動したい場所のURL"><img src="画像のURL"></a> というタグを使うことはわかったのですが、これをどこに貼ればいいのかわかりません。 どなたか解る方教えて頂けますか? よろしくお願いします。

  • JavaScriptでランダム表示を制御

    現在、別々のリンクを設定された6つの画像(<a href="..."><img src="..." /></a>)から、3つを取り出して、表示するというJavaScriptを作っています。 この3つのリンクされた画像は最初からHTMLに書かれているとします。 これを、DOMを使って、その別々の名前のIDのdivの子要素のhref,srcを抜き出したデータで書き換えてます。 (document.getElementById('...').href=...というカンジで) その際に、書き換えの関数をonLoadで呼び出してます。 その際、どうしても最初で表示されている画像などが見えて、書き換えが行われてしまいます。 関数の前に、そのdivをdisplay:noneにして、処理が終了後にdisplay:blockにしてますが、それでも前述のように、前の表示が出てきます。 書き換え後のみを表示させる方法を、CSSで最初からdisplay:noneにしておく以外で方法が分かる方、おられましたらよろしくおねがいします。

専門家に質問してみよう