1. Home
  2. HTMLタグ
  3. リンクタグ
  4. 画像でリンクする

画像でリンクする


<a href=""><img src="" alt=""></a>


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



<a href="index.html"><img src="sample.gif" alt="サンプル"></a>


【画像の境界線について】

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

TAG index

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

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

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

TAG index

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

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

a img {
border: none;
}

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

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

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

メモ

img要素alt属性は必須となります。忘れずに指定しておくようにしましょう。

境界線を消す指定は、スタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。


使用例


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

表示例

TAG index



<p><a href="img_example.html"><img src="neko_s.jpg" alt="写真を拡大"></a></p>

表示例

写真を拡大


リンクタグ

ページの先頭へ