http://www.tagindex.com/stylesheet/link/text_decoration.html この方法で消せることは知ったのですが、文字の場合は下線を表示、画像にリンクがある場合は、リンクの下線や枠を非表示にしたいです。

画像のリンク枠を消すのなら a img { border: none;} とCSSで定義する例） a img { border: none; } リンク

画像の場合のみ、下線を消す方法はありますか？

解決済

質問者：nhxwhitkqsmvy
質問日時：2014/01/13 22:00
回答数：4件

http://www.tagindex.com/stylesheet/link/text_dec …
この方法で消せることは知ったのですが、文字の場合は下線を表示、
画像にリンクがある場合は、リンクの下線や枠を非表示にしたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2014/01/14 09:29

ブラウザによって差がありますが、

リンクの擬似クラスと子孫セレクタをつかって・・・
a:link img{text-decoration:none;border-style:none;}
a要素内のすべての場合は(a name="")
a img{text-decoration:none;border-style:none;}
通常は残しておいて、ナビゲーション内だけなら
　div.nav a img{}
と指定すると良いでしょう。
　ユーザーインターフェースに関わる部分なので、障害者のことを考えると、リンクがあると明示したほうが良いのです。
a img{border:none;text-decoration:none;}
a:hover{border:1px solid red;}
として分かりやすくしても良いでしょう。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。

通報する

お礼日時：2014/01/26 18:47

No.3

回答者： DrFell
回答日時：2014/01/14 05:53

a img{/*★これでaの中のimgという意味になります。

*/
text-decoration: none;
border:none;
}

text-decoration: none;
リンクの下線を表示しない

border:none;
画像の周りの線を表示しない。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。

通報する

お礼日時：2014/01/26 18:47

No.2

回答者： anmochi
回答日時：2014/01/13 22:52

ん～そうねぇ。

楽な方法としては次のようなやり方になるかな。まず、cssをこう書く。

a.noline {
text-decoration: none;
}

どっとのーらいんというのを加えるんだな。次にhtmlをこう書く。

<p>
<a class="noline" href="hoge">ここのリンクは下線が出ません。</a>

<p>
<a href="hoge">ここのリンクは下線が出ます（ブラウザによるけど）。</a>

<p>
<a href="noline" href="hoge"><img src="fuga.jpg"></a>

<p>
<a href="hoge"><img src="fuga.jpg"></a>

今度はくらすいこーるのーらいんというのがあるのに気づくだろう。これにより、class="noline"というものを付けたaだけにtext-decoration: none;を適用するつまり下線を出さないという事になる。もちろんclass="noline"を付けてないaタグはデフォルトの動作を行う。
これで、画像と文字という区分けではなく、aタグにclass="noline"をつけたら下線を消す、そうでなければ付けるという制御ができるぞ。他にも色々やり方はあるけど、これが一番分かりやすくて（面倒ではあるが）楽なのではないかな。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。

通報する

お礼日時：2014/01/26 18:47

No.1

回答者： dezimac
回答日時：2014/01/13 22:47

画像のリンク枠を消すのなら

a img { border: none;}
とCSSで定義する

例）
<html>
<head>
<style type="text/css">
a img { border: none; }
</style>
</head>
<body>
<a href="index.html"><img src="hoge.jpg">リンク</a>
</body>
</html>