リンク付画像のリンク枠線を表示しない

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

サンプルソース

HTMLソース

<a href="test.html"><img src="test.jpg" alt="画像代替テキスト"/></a>

CSSソース

CSSソース

a img {
border-style:none;
}

サンプル表示

→リンク付画像のリンク枠線を表示しない(サンプル)


解説

HTMLソース

特にHTMLの方に記述することはありません。 普通に画像に対してリンクを張ればOKです。


CSSソース

CSSソース

a img {・・・}
このaの後にスペースを空けてimgと書く指定方法は、aタグの中にあるimgタグにのみ・・・を適用するという意味です。
つまり、リンク(a)を張られた画像(img)にのみ適用されるということです。

border-style:none;
これは、枠線を表示しない(none)という意味です。

上の説明と合わせれば、リンクを張られた画像の枠線を表示しないという指定をしていることになりますね。