outline-color：アウトラインの色を指定する

outline-colorプロパティの説明

outline-colorは、アウトラインの色を指定します。アウトラインは、色や形状、太さといった装飾の値を持ちますが、要素のボックスやコンテンツのレイアウトには影響を与えません。

outlineを直訳すると輪郭線になりますが、境界線を表すborderとは明確な違いがあります。境界線は要素が作成するボックスの中で専有の面積を持ちますが、アウトラインは持ちません。主に、境界線は要素の装飾を担う実態なのに対して、アウトラインは要素の存在を表す概念という捉え方ができます。

アウトラインの装飾に関するプロパティは以下の通りです。

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

outline-colorに指定できる値

<color>

CSSで使用できるデータ型の色の指定値です。キーワード、16進数、RGB値、HSL値などが使えます。

invert

背景色を反転してアウトラインに適用する値です。これによりアウトラインが背景と同化して見えなくなる現象を解決します。しかし、全てのブラウザがこの値を識別できるわけではありません。対応していないブラウザでは、currentcolorとなります。

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

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

/* <color>値 */
outline-color: #000;
outline-color: #0066ff;
outline-color: rgba(56, 56, 56, 0.5);
outline-color: cyan;

/* キーワード値 */
outline-color: invert;

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

outline-colorの実例

それでは実際にoutline-colorプロパティの書き方を見ていきましょう。以下の例は、テキストエリアがフォーカスされた時の装飾を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-style: solid;
	outline-width: 3px;
}
#ta_1:focus-visible {
	outline-color: #f60;
}
#ta_2:focus-visible {
	outline-color: #0099ff;
}
#ta_3:focus-visible {
	outline-color: rgba(56, 56, 56, 0.5);
}

<section class="samp_box">
	<label for="ta_1">
		<span>outline-color: #f60;</span>
		<input type="text" maxlength="16" id="ta_1">
	</label>
	<label for="ta_2">
		<span>outline-color: #0099ff;</span>
		<input type="text" maxlength="16" id="ta_2">
	</label>
	<label for="ta_3">
		<span>outline-color: rgba(56, 56, 56, 0.5);</span>
		<input type="text" maxlength="16" id="ta_3">
	</label>
</section>