outline-offset：アウトラインと要素の空間を指定する

outline-offsetプロパティの説明

outline-offsetは、アウトラインと要素の空間の量を指定します。通常、アウトラインは要素の輪郭と同じ位置に表示されますが、輪郭線を引く基準位置をオフセット値で変更できます。

オフセット値に正の数値を指定すると、アウトラインは要素の境界から外側に向かって拡張します。負の数値を指定すると、要素の内側に向かって絞り込むように縮小します。

アウトラインの装飾に関する値は以下のプロパティで設定します。

• outline：まとめて指定
• outline-color：アウトラインの色
• outline-style：アウトラインの形状
• outline-width：アウトラインの太さ

outline-offsetに指定できる値

<length>

CSSで使用できる単位つきの長さを表す値です。この値が要素の輪郭と輪郭線を切り離す距離を示します。正の値は外側に向かって拡張する量、負の値は内側に向かって縮小する量となります。

outline-offsetの使い方とサンプル

outline-offsetプロパティの構文は以下の通りです。

/* <length>値 */
outline-offset: 5px;
outline-offset: 1em;
outline-offset: 2vmax;

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

outline-offsetの実例

それでは実際にoutline-offsetプロパティの書き方を見ていきましょう。以下の例は、テキストエリアがフォーカスされた時の装飾をfocus-visibleセレクタで上書きした時の比較です。

<label>要素をコンテナにして選択可能にしています。これをクリックするか、キーボードでフォーカスを移動して表示されるアウトラインを確認してみましょう。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > label {
	display: block;
	margin: 1rem 0 0;
	padding: .5rem;
	background-color: #fff;
	cursor: pointer;
}
label > span {
	display: block;
}
label > input[type="text"] {
	width: 200px;
}
input[type="text"]:focus-visible {
	outline: 3px solid #f00;
}
#ta_1:focus-visible {
	outline-offset: 3px;
}
#ta_2:focus-visible {
	outline-offset: 6px;
}
#ta_3:focus-visible {
	outline-offset: -3px;
}

<section class="samp_box">
	<label for="ta_1">
		<span>outline-offset: 3px;</span>
		<input type="text" maxlength="16" id="ta_1">
	</label>
	<label for="ta_2">
		<span>outline-offset: 6px;</span>
		<input type="text" maxlength="16" id="ta_2">
	</label>
	<label for="ta_3">
		<span>outline-offset: -3px;</span>
		<input type="text" maxlength="16" id="ta_3">
	</label>
</section>