画像にリンクを張った時、画像の周りに表示されてしまう線を消す

CSSで何も指定しない場合、画像にリンクを張ると画像の周りに枠線が表示されてしまいます。
これを表示しないようにするやり方を紹介します。


灰色背景がサンプルソース


サンプルソース

HTMLソース

<a href="http://www.yahoo.co.jp"><img src="test.gif"/></a>

CSSソース

a img {border-style:none;}

サンプル表示

→画像にリンクを張った時、画像の周りに表示されてしまう線を消す(サンプル)


解説

HTMLソース

特にHTMLの方に記述することはありません。 普通に画像にリンクを張る時と同じように書けばOKです。


CSSソース

a img {border-style:none;}を指定します。
これは、画像(img)にリンク(a)を張った時に、周りに枠線を表示しない(border-style:none;)という意味です。

a imgがaタグの中にimgタグがある場合という意味。つまり、画像にリンクを張った場合となる。
で、その時にborder-style:none;。つまり、枠線のスタイルを「線なし」にすると指定しているという意味になります。