- ベストアンサー
【ＣＳＳ】<a><image /></a>リンクでイメージの時だけアウトラインを消したい
htmlで<a></a>の中に<img />があるときだけアウトラインを消したいです。<a></a>中がテキストの時はアウトラインをつけたいです。 以下の様な記述で実現は出来たのですが、styleの記述をhead部に移行したいです。どうし記述したら良いでしょうか？ <html> <head> <style> <!-- img { border: none; } --> </style> </head> <body> <a style="outline: none" href="javascript:void(0);"><img src="http://www.goo.ne.jp/gooicon.ico" alt="" /></a><br> <!--アウトラインを消したい--> <a href="javascript:void(0);">test</a> <!--アウトラインを消したくない--> </body> </html>
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- HTML
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ならば・・・ img { border-width: 0px; } a:link{ text-decoration:none; } を別ファイルで外部にしてclassやidで該当箇所に適応させれば良いのでは？
その他の回答 (4)
- reverie013
- ベストアンサー率18% (26/143)
あの、いえ、class指定してみたら？ と言ったのですが……＾＾； すみません、クラス指定というものをご存じなかったようですね。 こちら http://www.tagindex.com/stylesheet/basic/format2.html を参考にしてみて下さい。
お礼
reverie013さん ご回答ありがとうございました。 以下の様にして出来ました。 <html> <head> <style> <!-- img { border: none; } .outline { outline: none; } --> </style> </head> <body> <a class="outline" href="javascript:void(0);"><img src="http://www.goo.ne.jp/gooicon.ico" alt="" /></a><br> <!--アウトラインを消したい--> <a href="javascript:void(0);">test</a> <!--アウトラインを消したくない--> </body> </html>
- reverie013
- ベストアンサー率18% (26/143)
そのoutline:none;をクラス指定したらいいんじゃないんですか？
補足
reverie013さん ご回答ありがとうございます。 以下の様に記述して試してみましたが、期待した結果は得られませんでした。<a></a>の方が優先されるのでしょうか。 head部だけの記述で実現ってのは無理なんですかね。 <html> <head> <style> <!-- img { border-width: 0px; outline:none; } --> </style> </head> <body> <a href="javascript:void(0);"><img src="http://www.goo.ne.jp/gooicon.ico" alt="" /></a><br> <!--アウトラインを消したい--> <a href="javascript:void(0);">test</a> <!--アウトラインを消したくない--> </body>
img { border-width: 0px; } コレだけで充分です。
補足
ご回答ありがとうございます。 img { border-width: 0px; }と記述してみましたが、消えませんでした。 質問の仕方が不十分だったかもしれません。すみません。 消したいのは、クリック後に出る点線の外枠なんです。 imgの時だけ消して、テキストの時は消したくないのです。
- se-nabe
- ベストアンサー率34% (31/91)
アウトライン？といいますのは下線のことですか？ それでしたら、 text-decoration: none; でできませんか？ これをIDとかクラスで指定してやればできると思います。 --CSS-- #under-line { text-decoration: none; } --HTML-- <a href="#" id="under-line">hogehoge</a>
補足
ご回答ありがとうございます。 質問の仕方が悪かったようです・・・ アウトラインと申したのは、リンクをクリックした後に残る点線の枠の事でして、下線のことではありません。 style="outline: none"で消せるのですが、 <a herf="hoge">test</a>の時は有効で、 <a herf="hoge"><imag src="hoge" alt="" /></a>の時に消したいのです。 質問で示したように、 <a style="outline: none" href="hoge">"><imag src="hoge" alt="" /></a> と書けば、実現できるようですが、styleを各タグの中に記述するのはイヤでして。
お礼
aidesさん たびたびありがとうございます。 以下の様な記述でできました。 スッキリしました。 <html> <head> <style> <!-- img { border-width: 0px; } a:link{ text-decoration:none; } --> </style> </head> <body> <a style="outline: none" href="javascript:void(0);"><img src="http://www.goo.ne.jp/gooicon.ico" alt="" /></a><br> <!--アウトラインを消したい--> <a href="javascript:void(0);">test</a> <!--アウトラインを消したくない--> </body> </html>