outlineプロパティの説明
CSSのoutlineプロパティは、要素の輪郭線として引かれるアウトラインの装飾を一括で指定します。本プロパティは、アウトラインの色、形状、太さをまとめて操作するショートハンド・プロパティです。
outlineを直訳すると輪郭線になりますが、境界線を表すborderとは明確な違いがあります。境界線は要素が作成するボックスの中で専有の面積を持ちますが、アウトラインは持ちません。主に、境界線は要素の装飾を担う実態なのに対して、アウトラインは要素の存在を表す概念という捉え方ができます。
例えば、キーボードの操作で要素のフォーカスを移動した祭に、アウトラインで現在位置を知らせます。そのアウトラインをもって、要素の影響範囲あるいは操作可能範囲を表すことになります。境界線であれば、あくまで視覚的に装飾された部分にしかなりませんが、アウトラインであれば可視化されないリンクのボックス範囲なども表すことが可能です。
アウトラインの装飾を個別に行う場合は、以下のプロパティを使用してください。要素の輪郭から切り離した位置にアウトラインを表示するにはoutline-offsetを、アウトラインの角を丸めるにはborder-radiusを使用します。
outline-color：アウトラインの色outline-style：アウトラインの形状outline-width：アウトラインの太さ
outlineに指定できる値
<'outline-color'>- アウトラインの色を設定します。省略した場合は既定値の
currentcolorとなります。詳細は、outline-colorを参照してください。 <'outline-style'>- アウトラインの形状を設定します。省略した場合は既定値の
noneとなります。詳細は、outline-styleを参照してください。 <'outline-width'>- アウトラインの太さを設定します。省略した場合は既定値の
mediumとなります。詳細は、outline-widthを参照してください。
outlineの使い方とサンプルコード
outlineプロパティの構文は以下の通りです。
/* style */
outline: solid;
outline: dashed;
outline: dotted;
/* style | color */
outline: solid #000;
outline: dotted gray;
outline: dashed rgba(0, 0, 0, 0.5);
/* width | style */
outline: thick double;
outline: 10px inset;
/* width | style | color */
outline: 1px solid #333;
outline: thick double gray;
/* グローバル値 */
outline: inherit;
outline: initial;
outline: revert;
outline: unset;
outlineの実例
それでは実際にoutlineプロパティの書き方を見ていきましょう。以下の例は、テキストエリアがフォーカスされた時の装飾をfocus-visibleセレクタで上書きした時の比較です。
<label>要素をコンテナにして選択可能にしています。これをクリックするか、キーボードでフォーカスを移動して表示されるアウトラインを確認してみましょう。
<section class="samp_box">
<label for="ta_1">
<span>outline: solid;</span>
<input type="text" maxlength="16" id="ta_1">
</label>
<label for="ta_2">
<span>outline: dashed #f90;</span>
<input type="text" maxlength="16" id="ta_2">
</label>
<label for="ta_3">
<span>outline: 3px double #09f;</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;
}
#ta_1:focus-visible {
outline: solid;
}
#ta_2:focus-visible {
outline: dashed #f90;
}
#ta_3:focus-visible {
outline: 3px double #09f;
}