Outlines

概要

要素の外側にアウトラインを描画するプロパティ群です。borderとは異なり、レイアウトに影響を与えません（要素のサイズを変えない）。フォーカスインジケーターとして最も重要な役割を担い、outline-offsetでアウトラインと要素の間隔を調整できます。デバッグ時のレイアウト確認にも便利です。

対応ブラウザ

基本構文

:focus-visible {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}
.debug * {
  outline: 1px solid red;
}

実務での使いどころ

• フォーカスインジケーターのカスタマイズ

  キーボード操作時のフォーカス表示をoutlineでカスタマイズし、ブランドカラーに合った視認性の高いインジケーターを設定します。

注意点

アクセシビリティ

• フォーカスインジケーターを削除することはWCAG違反です。:focus-visibleに十分な視認性のoutlineを設定してください。

参考リンク

• MDN Web Docs — Outlines