<a href=""><img src="" alt=""></a>
<a href="index.html"><img src="sample.gif" alt="サンプル"></a>
【画像の境界線について】
画像にリンクを設定すると、一般的なブラウザでは画像の周囲に境界線が表示されます。
この境界線を消したい場合は、次のように指定します。
<a href="index.html"><img src="tagindex.gif" alt="HTML index" border="0"></a>
img要素に border="" を追加して、その値に 0 を指定します。
※ただし、img要素のborder属性は非推奨属性となります。(Strict DTDでは使用できません)
スタイルシートで境界線を消す場合は、例えば次のようなスタイルを指定しておきます。
a img {
border: none;
}
上記は、「a要素内に置かれたimg要素の境界線を表示しない」という指定です。
用途によっては、境界線を消さない方がいい場合も考えられます。
例えば、小さな写真をクリックすると拡大写真が表示される場合には、境界線をあえて表示させておくことで、その操作を直感的に伝えることが可能になります。
img要素のalt属性は必須となります。忘れずに指定しておくようにしましょう。
境界線を消す指定は、スタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。
使用例
- サイト内検索