outline-style:アウトラインの形状を指定する
初期値 | none |
適用対象 | 全ての要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
outline-styleプロパティの説明
outline-style
は、アウトラインの形状を指定します。アウトラインは、色や形状、太さといった装飾の値を持ちますが、要素のボックスやコンテンツのレイアウトには影響を与えません。
outline-style
の値を省略すると、既定値がnone
であるため表示されません。アウトラインを表示させたい場合は、必ず何らかの値を明示して下さい。
アウトラインの装飾に関するプロパティは以下の通りです。
outline
:まとめて指定outline-color
:アウトラインの色outline-style
:アウトラインの形状outline-width
:アウトラインの太さ
outline-styleに指定できる値
- auto
- ブラウザの自動処理に任せます。
- none
- アウトラインを描画しません。色や太さを変えても、この値が指定されている限りアウトラインの幅は
0
とみなされます。これが初期値です。 - solid
- 一本の実線でアウトラインを描画します。
- dashed
- 破線でアウトラインを描画します。
- dotted
- 点線でアウトラインを描画します。
- double
- 二重の実線でアウトラインを描画します。
- groove
- アウトラインの中央が凹んでいるように見える直線を表示します。光源が右下に置かれており、左上に影が落ちます。この時、
outline-color
で指定した色は自動的に調整され、立体的に見えます。表現的にはridge
の逆です。 - ridge
- アウトラインの中央が隆起しているように見える直線を表示します。光源が左上に置かれており、右下に影が落ちます。この時、
outline-color
で指定した色は自動的に調整され、立体的に見えます。表現的にはgroove
の逆です。 - inset
- 要素が押し込まれて見えるように明暗を分けたアウトラインを表示します。表現的には
outset
の逆です。 - outset
- 要素が出っ張って見えるように明暗を分けたアウトラインを表示します。表現的には
inset
の逆です。
outline-styleの使い方とサンプル
outline-style
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
outline-style: auto;
outline-style: none;
outline-style: solid;
outline-style: dashed;
outline-style: dotted;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* グローバル値 */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: unset;
outline-styleの実例
それでは実際にoutline-style
プロパティの書き方を見ていきましょう。以下の例は、テキストエリアがフォーカスされた時の装飾をfocus-visible
セレクタで上書きした時の比較です。
<label>
要素をコンテナにして選択可能にしています。これをクリックするか、キーボードでフォーカスを移動して表示されるアウトラインを確認してみましょう。
表示確認
CSS
.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-color: rgb(83, 172, 221);
outline-width: 5px;
}
#ta_1:focus-visible {
outline-style: double;
}
#ta_2:focus-visible {
outline-style: groove;
}
#ta_3:focus-visible {
outline-style: inset;
}
HTML
<section class="samp_box">
<label for="ta_1">
<span>outline-style: double;</span>
<input type="text" maxlength="16" id="ta_1">
</label>
<label for="ta_2">
<span>outline-style: groove;</span>
<input type="text" maxlength="16" id="ta_2">
</label>
<label for="ta_3">
<span>outline-style: inset;</span>
<input type="text" maxlength="16" id="ta_3">
</label>
</section>
outline-styleに関連するCSSプロパティ
境界線・輪郭線 | |
---|---|
border | 要素の周囲に境界線を付ける |
border-bottom | 要素の底辺に境界線を付ける |
border-bottom-color | 要素の底辺に表示する境界線の色を指定する |
border-bottom-left-radius | 要素の左下の角丸を指定する |
border-bottom-right-radius | 要素の右下の角丸を指定する |
border-bottom-style | 要素の底辺に表示する境界線の形状を指定する |
border-bottom-width | 要素の底辺に表示する境界線の幅を指定する |
border-color | 要素の境界線の色を指定する |
border-image | 要素の境界線に画像を指定する |
border-image-outset | 境界線の画像が要素の縁からはみ出す距離を指定する |
border-image-repeat | 境界線に表示させる画像の繰り返し方を指定する |
border-image-slice | 境界線に指定した画像の使用範囲を指定する |
border-image-source | 境界線に使用する画像ファイルを指定する |
border-image-width | 境界線に指定した画像の幅を指定する |
border-left | 要素の左辺に境界線を付ける |
border-left-color | 要素の左辺に表示する境界線の色を指定する |
border-left-style | 要素の左辺に表示する境界線の形状を指定する |
border-left-width | 要素の左辺に表示する境界線の幅を指定する |
border-radius | 要素の角丸についてまとめて指定する |
border-right | 要素の右辺に境界線を付ける |
border-right-color | 要素の右辺に表示する境界線の色を指定する |
border-right-style | 要素の右辺に表示する境界線の形状を指定する |
border-right-width | 要素の右辺に表示する境界線の幅を指定する |
border-style | 境界線の形状を指定する |
border-top | 要素の上辺に境界線を付ける |
border-top-color | 要素の上辺に表示境界線の色を指定する |
border-top-left-radius | 要素の左上の角丸を指定する |
border-top-right-radius | 要素の右上の角丸を指定する |
border-top-style | 要素の上辺に表示する境界線の形状を指定する |
border-top-width | 要素の上辺に表示する境界線の幅を指定する |
border-width | 境界線の幅を指定する |
outline | アウトラインの装飾を一括で指定する |
outline-color | アウトラインの色を指定する |
outline-offset | アウトラインと要素の空間を指定する |
outline-style | アウトラインの形状を指定する |
outline-width | アウトラインの太さを指定する |