枠線
outline
アウトラインを指定します
| value | description |
|---|---|
solid | 枠線の種類を指定する |
1px solid rgb(56, 189, 248) | 枠線の幅、種類、色を指定する |
Demo
<input type="text" placeholder="Click me" class="box" />
.box {
padding: 4px 8px;
border: 1px solid rgb(156, 163, 175);
border-radius: 4px;
background: rgb(71, 85, 105);
}
.box:focus {
outline: 2px solid #0073ff;
}
.box::placeholder {
color: rgb(156, 163, 175);
}
概要
アウトラインを指定します。以下の 3 つのプロパティをまとめて指定できるショートハンドです。（outline-offsetは含まれません）
outline-width | 枠線の幅を指定します | pxで指定する場合がほとんどです |
outline-style | 枠線のスタイルを指定します | solid dashed dotted double etc...(※) |
outline-color | 枠線の色を指定します | |
[参考] outline-offset | 枠線のオフセットを指定します | outlineでは指定できないため、個別に指定する必要があります |
ほとんどの場合、フォーカス時のスタイルを指定する目的で利用されます。一般的に枠線を表現する場合はborderが適しています。
borderとの違い
borderはレイアウトに影響を与えますが、outlineは影響を与えません。左側の入力欄はフォーカスが当たると8pxのborderが、右側の入力欄は8pxのoutlineが表示されるようになっています。
borderが表示された場合、周りの文章等の位置がガタッとずれることがわかります。すなわちレイアウトに影響を与えます。一方outlineは影響を与えません。（影響を与えないため、outlineの文字も隠れてしまっています。）
また、outline-offset: 4px;のように、要素と枠線の距離を指定できるのはoutlineのみです。
border
outline
フォーカス時のデザインのみoutline、それ以外の枠線のデザインはborderという使い分けで問題ないでしょう。
フォーカス時のoutlineを無効化する
ブラウザではフォーカスが当たるとoutlineが付与されるようになっています。
以下の入力ボックスをクリック（タップ）してみてください。
タップすると青い枠線が出現すると思います（ブラウザによってはデザインが異なるかもしれません）。この青い枠線がアウトラインです。
ブラウザのデフォルトのデザインでは、入力要素などにフォーカスが当たるとoutlineのスタイルが付与されるようになっています。
正直このアウトラインはカッコ良くはないですが、アクセシビリティの観点から必要なものであるとされています。
例えばキーボードで操作しているユーザーに、今どの要素がフォーカスされているのかを知らせる役割があります。
アウトラインを無効化する場合は、以下のような対策を行う必要があります。
borderやbox-shadowを用いて代替の表現を行うfocus-visibleでoutlineを指定する
例えばこのウェブサイトの左上（PC 表示）にある「Quick search」は、outlineを無効化し、borderでフォーカスを表現しています。
詳しくはフォーカス時のアウトラインを無効化するをご覧ください。