【CSS】aタグやbuttonタグで、クリック時に表示される枠線を消す方法

aタグやbuttonタグにクリック時に現れる枠線

aタグやbuttonタグをクリックした際、スタイルに何も記載がなくても、タグを囲む枠線が表示されることがあります。

これはブラウザのアクセシビリティのために表示されるものです。

Webアクセシビリティとは、さまざまなインターネット利用環境に対応することで、たとえばブラウザをマウスではなくキーボードで操作する場合や、PCの他にタブレットやスマホといった端末に対応する、また視聴覚に障碍のあるユーザーへの対応などがあります。

なので本来は枠線は残すものですが、デザイン上非表示にしたいという場合があります。

その場合は、スタイルの outline を noneに設定することで非表示にすることが可能です。

:focus {
  outline: none;
}

aタグに設定する場合

a {
  outline: none;
}

Webアクセスビリティの観点からは、これらは残しておいたほうがよいということだけを紹介するサイトもあったりします。

http://outlinenone.com/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA