クリック時に出る青い枠(アウトライン)をCSSで非表示にする方法｜備忘録
こんにちは。いっきー(@ikirin_web)です。
自分用の備忘録ですが、同じようにクリック時の青枠で悩んでいる方の参考になれば嬉しいです！
クリック時に青いアウトラインが出る場合の対処法
アクセシビリティのために outline を :focus で設定していましたが、クリック操作の際にもアウトラインが表示されてしまいました。
ヘッダーやフッター、テキストリンクなどの周りに枠が出ると見た目が崩れてしまうため、focus ではなく focus-visible に変更することで解決しました。
:focus と :focus-visible の違い
ポイント
:focus… キーボード操作・マウスクリックの両方でアウトラインを表示- :
focus-visible… キーボード操作時のみ アウトラインを表示
これにより、マウス操作では不必要な枠が出ず、アクセシビリティを保ちながらデザインを整えることができます。
CSSの記述例
/* リンク共通の設定 */
.link {
position: relative;
transition: opacity 0.3s ease;
}
/* ホバー時の視覚的効果 */
@media (any-hover: hover) {
.link-icon:hover {
opacity: 0.7;
}
.link-text:hover::after {
width: 100%;
}
}
/* キーボード操作時のアウトライン表示 */
.link-icon:focus-visible,
.link-text:focus-visible {
outline: 1px solid #007BFF;
}
🔗参考
✍️ ひとこと
アクセシビリティを意識すると、マウス操作時の挙動を見逃してしまうので、今後も忘れないようにメモとして残しました。
最後まで読んでいただきありがとうございました。
