outline

outline は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ (outline-style, outline-width, outline-color) を単一の宣言で設定するための一括指定です。

他の一括指定プロパティと同様に、省略された値は初期値に設定されます。

境界線と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。

• 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。
• 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。

/* 種類 */
outline: solid;

/* 色 | 種類 */
outline: #f66 dashed;

/* 種類 | 幅 */
outline: inset thick;

/* 色 | 種類 | 幅 */
outline: green solid 3px;

/* グローバル値 */
outline: inherit;
outline: initial;
outline: unset;

outline プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。

<'outline-color'>

輪郭線の色を設定します。未指定の場合の既定値は currentcolor です。 outline-color を参照してください。

<'outline-style'>

輪郭線の種類を設定します。未指定の場合の既定値は none です。 outline-style を参照してください。

<'outline-width'>

輪郭線の太さを設定します。未指定の場合の既定値は medium です。 outline-width を参照してください。

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

outline の値を 0 または none にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。

• How to Design Useful and Usable Focus Indicators

• WCAG 2.1: 成功基準 2.4.7 の理解: フォーカスの可視性