画像でリンクする

a要素の中にimg要素を配置すると、画像でリンクすることができます。

画像の境界線について

画像にリンクを設定すると、一般的なブラウザでは画像の周囲に境界線が表示されます。

この境界線を消したい場合は、次のように指定します。

<a href="index.html"><img src="tagindex.gif" alt="TAG index" border="0"></a>

img要素に border="" を追加して、その値に 0 を指定します。

• ただし、img要素のborder属性は非推奨属性となります。（Strict DTDでは使用できません）

スタイルシートで境界線を消す場合は、例えば次のようなスタイルを指定しておきます。

a img {
border: none;
}

上記は、a要素内に置かれたimg要素の境界線を表示しないという指定です。

用途によっては、境界線を消さない方がいい場合も考えられます。

例えば、小さな写真をクリックすると拡大写真が表示される場合には、境界線をあえて表示させておくことで、その操作を直感的に伝えることが可能になります。