日記/2009/04/30/HTMLリンクの周りの点線を除去

<img>要素を組み合わせたリンクとかですと、リンクをクリックした時の点線囲みが思わぬ領域まではみ出したりする時があります。タブ風のリンクを作成する時も目立ってしまいますので、何とかその点線を非表示にしたい時もあるかも。

そういう場合は、一番お手軽なのは

a:active { outline: none; }

とCSS指定する手法です。

"remove dotted line arround link" でググると沢山出てきます。

• "SonSpring | Removing Dotted Links"
  • http://sonspring.com/journal/removing-dotted-links
• "CSS: Remove Dotted Outline Border From Active Links [Snippet] « elc technologies"
  • http://www.elctech.com/snippets/css-remove-dotted-outline-border-from-active-links

但し、随所でコメント欄や注意書きに書かれているとおり、点線を除去すると、TABキーでリンクを移動している人など、人によってはどこにリンクがあるのか分からないという不便さも出てきます。
そうしたアクセシビリティの問題に注意した上で用いれば、便利な手法だと思います。