【CSS】画像下の線が消えない時の対処法

a img { border:none }を指定しても画像下の線が消えない時の対処法です。

なぜ効かないのか

aタグの中にimgタグがあるからです。
例：<a href="#"><img src="hoge.jpg"></a> の場合、imgタグにスタイルを書いてもaタグに適応されることはありません。
WordPressでは上の例のようなHTMLの記述方法になるので、この問題に直面する人も多いはずです。

text-decorationを使ってリンク下に線を表示するのが一番手っ取り早い解決法ではあるのですが、当記事にたどり着いた人はどうしてもBorderを使って線を表示したい人がほとんどだと思うので、その場合の対処法を書いていきます。

対処法①：border-style:noneの書いたクラスを用意し、aタグに毎回貼る

.no-border {
 border: none; 
}

というクラスを用意してaタグの中に毎回、 <a class="no-border" href=" ~~~ という風に貼ります。
この方法が一番綺麗に消えるので、このくらいの手間は大したことないと思う方ならこの方法が一番おすすめです。

対処法②：CSS3 selectorsを使う

a [href$=".png"] { border: none }
a [href$=".jpg"] { border: none }
a [href$=".jpeg"]{ border: none }
a [href$=".jpe"] { border: none }
a [href$=".gif"] { border: none }
a [href$=".bmp"] { border: none }
a [href$=".ico"] { border: none }

CSS3 selectorsを使って画像の時のみborder:noneになるようにします。

簡単に解説すると、aタグのhref属性の最後に、".png"が書かれていれば、border:noneをする、という動作になります。

対処法③：隣接セレクタを使う

img + a { border: none }

img要素と隣なったa要素のborder:noneを指定します。

対処法④：jQueryを使う

$(function() {
 $('img').parent('a').css({'border':'none'});
});

CSSだけで解決することを諦め、jQueryを書きました。

簡単に解説すると、imgの親要素のaタグにborder:noneをする、という意味です。
これは綺麗に消えるので上2つの方法よりもおすすめです。

・導入方法：通常のサイト

<script>
$(function() {
 $('img').parent('a').css({'border':'none'});
});
</script>

・導入方法：Wordpress

<script>
jQuery(function() {
 jQuery('img').parent('a').css({'border':'none'});
});
</script>

対処法⑤：Borderを背景色で上書きする

a img {
    margin-bottom: -6px;
    border-bottom: 1px solid #fff;
}

おまけ的なものです。
CSS3に対応してないブラウザ/Javascriptの無効環境向けに。

背景色のBorderを使って無理やり上書きする方法です。 一番最初にうまく場所がかぶさるように調整する必要がありますが、それさえ一度終わらせてしまえば手間なく画像下のBorderを消すことができます。

ただし、このままだとサイト内の全ての画像に影響を及ぼしてしまうので問題の場所のみに適応させる工夫は必要になりますし、環境によっては変に見えてしまう可能性もあるのでその点は注意する必要があります。