リンククリック時の黒い枠を消したい！原因と安全な対処法を解説

リンクをクリックしたときに「文字のまわりに黒い枠（黒線）」が表示されて気になったことはありませんか？
これはブラウザの標準仕様によるもので、意図的に設計された重要な役割があります。

今回は、その黒い枠の正体と、安全に消す・調整するためのCSSテクニックを紹介します。

黒い枠の正体は「outline」

リンクに表示される黒い枠は、outline というCSSプロパティによって表示されるフォーカス（focus）状態の装飾です。

特にキーボード操作ユーザーが、Tabキーでどのリンクにフォーカスしているかを視覚的に確認できるようになっています。
これはアクセシビリティ（使いやすさ）向上のための大事な要素です。

CSSで黒い枠（outline）を消す方法

どうしてもデザイン上、リンククリック時の黒枠を消したい場合は、CSSで次のように指定できます。

.wp-block-pages-list__item__link {
  font-weight: bold;
  font-size: 1.4rem;
  text-decoration: none;
  color: #333;
  margin-top: 0.3rem;
  outline: none; /* ← 黒い枠を消す */
}

このコードを使えば、クリック時の黒線（アウトライン）は表示されなくなります。

アクセシビリティを保ちつつデザインを整える方法

黒枠を完全に消してしまうと、キーボード操作でリンクが見えづらくなり、ユーザビリティが下がる恐れがあります。

そのため、以下のように「目立たない色」に変更するのがおすすめです。

.wp-block-pages-list__item__link:focus {
  outline: 2px solid #aad4f5;
  outline-offset: 2px;
  border-radius: 6px;
}

これなら、フォーカスされたリンクが適度に目立ちつつ、デザインを邪魔しません。

マウス操作時だけ黒枠を消す方法（おすすめ）

もっとも安全で実用的な方法は、**「キーボード操作では枠を表示、マウス操作では非表示にする」**というやり方です。

以下のCSSとJavaScriptを組み合わせれば、理想的なフォーカス管理が可能になります。

/* 初期状態ではoutlineを無効 */
.wp-block-pages-list__item__link:focus {
  outline: none;
}

/* キーボード操作のときだけoutlineを表示 */
body.user-is-tabbing .wp-block-pages-list__item__link:focus {
  outline: 2px solid #aad4f5;
  outline-offset: 2px;
  border-radius: 6px;
}
function handleFirstTab(e) {
  if (e.key === "Tab") {
    document.body.classList.add("user-is-tabbing");
    window.removeEventListener("keydown", handleFirstTab);
  }
}
window.addEventListener("keydown", handleFirstTab);

このコードは「Tabキーによる操作が初めてあった時」にuser-is-tabbingクラスを追加し、CSSで適用できるようにします。

まとめ

  • リンククリック時の黒枠は「outline」によるフォーカス表示
  • 単純に消すなら outline: none;
  • より安全にするなら、outlineの色や太さを調整
  • 最適なのは「マウスとキーボードで表示を切り替える」方法

見た目の美しさと使いやすさを両立させたいなら、紹介した方法をぜひ取り入れてみてください。

投稿をさらに読み込む