リンクをクリックしたときに表示される点線を消す方法

  1. acky.infoホーム
  2. デザインのヒント
  3. CSSテクニック
  4. リンクをクリックしたときに表示される点線を消す方法

リンクをクリックしたときに表示される点線を消す方法の概要です

a要素が:focus状態になったときにoutline:none;を指定すると、リンクをクリックしたときに表示される点線を消すことができます。
新しいブラウザではクリックしたときの点線が表示されることはほぼありませんが、ターゲットブランクのリンクや、スライダーなどのスクリプトの中にあるリンクをクリックしたときに点線が表示されるときがあります。
リンクの設定や場所によっては点線が表示されてしまうのでは統一感がないので、点線を表示しないように統一しましょう。

まとめ!

  • a要素の:hoveroutline:none;を指定
広告

HTML・CSSとデモページ

HTMLコード

<a href="#" class="outline">リンク</a>
<br>
<a href="#">リンク</a>

CSSコード

a.outline:focus{
	outline:1px dotted;
}
a:focus{
	outline:none;
}

【問題】リンクをクリックしたときに表示される点線

HTMLコード

<a href="#" class="outline">リンク</a>

CSSコード

a.outline:focus{
	outline:1px dotted;
}

リンクをクリックして:focus状態になったときに、リンクのまわりに点線が表示されるときがあります。※新しいブラウザでは点線が表示されないのでCSSを指定して表示させています。

【解決】リンクをクリックしたときに表示される点線を消す方法

HTML・CSSと方法

HTMLコード

<a href="#">リンク</a>

CSSコード

a:focus{
	outline:none;
}

リンクをクリックしたときに表示される点線は、3行目のように
outline:none;
:focus状態になったときにoutlineを消すように指定すると、点線が表示されなくなります。

まとめ

a要素が:focus状態になったときにoutline:none;を指定すると、リンクをクリックしたときに表示される点線を消すことができます。
新しいブラウザではクリックしたときの点線が表示されることはほぼありませんが、ターゲットブランクのリンクや、スライダーなどのスクリプトの中にあるリンクをクリックしたときに点線が表示されるときがあります。
リンクの設定や場所によっては点線が表示されてしまうのでは統一感がないので、点線を表示しないように統一しましょう。

最後まで読んでいただき、ありがとうございました。

広告
最新のEdge、Internet Explorer、Firefox、Chromeできれいにページを見ることができます。