aタグやbuttonタグにクリック時に現れる枠線
aタグやbuttonタグをクリックした際、スタイルに何も記載がなくても、タグを囲む枠線が表示されることがあります。
これはブラウザのアクセシビリティのために表示されるものです。
Webアクセシビリティとは、さまざまなインターネット利用環境に対応することで、たとえばブラウザをマウスではなくキーボードで操作する場合や、PCの他にタブレットやスマホといった端末に対応する、また視聴覚に障碍のあるユーザーへの対応などがあります。
なので本来は枠線は残すものですが、デザイン上非表示にしたいという場合があります。
その場合は、スタイルの outline を noneに設定することで非表示にすることが可能です。
:focus {
outline: none;
}
aタグに設定する場合
a {
outline: none;
}
Webアクセスビリティの観点からは、これらは残しておいたほうがよいということだけを紹介するサイトもあったりします。
