画像をAタグで囲みリンクとして設定すると画像の周囲に青線の枠が表示されます。これを防ぐ方法を紹介します。

概要

基本方針はimgタグのborderにborder-style:none;を設定することで、枠を非表示にできますが、いくつかの方法があります。

<a>タグに設定する場合

<a>タグに設定する場合はスタイルシートに以下の記述をします。

<style type="text/css">
<!--
.NoBorder img{
 border-style:none
}
-->
</style>

<a class="Noborder"><img alt="" src="xx.jpg"/></a>

<img>タグに設定する場合

<img>タグに設定する場合は、Styleタグにborder-style:none;の設定を記述することで対応できます。

<style type="text/css">
<!--
.NoBorder{
 border-style:none
}
-->
</style>
<a><img class="Noborder" alt="" src="xx.jpg"/></a>

または

<a><img style="border-style:none;" alt="" src="xx.jpg"/></a>