[IE]CSS やJS で、リンククリック時の点線を消す方法｜IE｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[IE]CSS やJS で、リンククリック時の点線を消す方法

スポンサード

IE でa タグのリンクをクリックした際に見える「点線」を消す方法をご紹介します。

今回の方法でリンククリック時の点線は表示されなくなりますが、キーボードのタブキー操作の際に、どこのリンクにフォーカスしているのかが分かりにくくなるというデメリットもあります。

アクセリビリティ上、今回のような処理を施すかどうかは要検討だと思いますので、お仕事の都合などで「どうしても点線を消したい」という場合にご参考いただければと思います。

リンクの点線を消すCSS

下図のように、リンクをクリックした時に表示される点線を、
CSS やJS で、リンククリック時の点線を消す方法

まずはCSS で消す方法ですが、

a{
  outline:none;
}

リンクタグにoutline:none を指定してあげます。

リンクの点線を消すJavascript

続いてJavascript による方法ですが、
IEでリンクをクリックした時に出る点線を消すjQuery のブログ記事で

aタグにonfocus=”this.blur()”を付けると点線が表示されなくなる

という方法が掲載されていましたので、紹介させていただきます。

<script src="/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("a").bind("focus",function(){
		if(this.blur)this.blur();
	});
});
</script>

スポンサード