outline-widthプロパティの説明
CSSのoutline-widthプロパティは、アウトラインの太さを指定します。アウトラインは、色や形状、太さといった装飾の値を持ちますが、要素のボックスやコンテンツのレイアウトには影響を与えません。
outlineを直訳すると輪郭線になりますが、境界線を表すborderとは明確な違いがあります。境界線は要素が作成するボックスの中で専有の面積を持ちますが、アウトラインは持ちません。主に、境界線は要素の装飾を担う実態なのに対して、アウトラインは要素の存在を表す概念という捉え方ができます。
アウトラインの装飾に関するプロパティは以下の通りです。
outline：まとめて指定outline-color：アウトラインの色outline-style：アウトラインの形状outline-width：アウトラインの太さ
outline-widthに指定できる値
<length>- CSSで使用できる単位つきの長さを表す値です。ピクセルやポイントといった絶対値を表す単位、フォントサイズやビューポートといった相対値を表す単位を指定できます。負の値は使用できません。
thin- 細い幅を表すキーワード値です。寸法はブラウザの実装に依存します。おおよそ
1pxです。 medium- 中太の幅を表すキーワード値です。寸法はブラウザの実装に依存します。おおよそ
3pxです。 thick- 太い幅を表すキーワード値です。寸法はブラウザの実装に依存します。おおよそ
5pxです。
outline-widthの使い方とサンプルコード
outline-widthプロパティの構文は以下の通りです。
/* キーワード値 */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* <length>値 */
outline-width: 1px;
outline-width: 0.3em;
outline-width: 1vmax;
/* グローバル値 */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: unset;
outline-widthの実例
それでは実際にoutline-widthプロパティの書き方を見ていきましょう。以下の例は、テキストエリアがフォーカスされた時の装飾をfocus-visibleセレクタで上書きした時の比較です。
<label>要素をコンテナにして選択可能にしています。これをクリックするか、キーボードでフォーカスを移動して表示されるアウトラインを確認してみましょう。
<section class="samp_box">
<label for="ta_1">
<span>outline-width: thin;</span>
<input type="text" maxlength="16" id="ta_1">
</label>
<label for="ta_2">
<span>outline-width: medium;</span>
<input type="text" maxlength="16" id="ta_2">
</label>
<label for="ta_3">
<span>outline-width: thick;</span>
<input type="text" maxlength="16" id="ta_3">
</label>
</section>
.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-color: #f60;
}
#ta_1:focus-visible {
outline-width: thin;
}
#ta_2:focus-visible {
outline-width: medium;
}
#ta_3:focus-visible {
outline-width: thick;
}