outline
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* 種類 */
outline: solid;
/* 種類 | 色 */
outline: dashed #f66;
/* 幅 | 種類 */
outline: thick inset;
/* 幅 | 種類 | 色 */
outline: 3px solid green;
/* グローバル値 */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;
outline
プロパティは以下に挙げた 1 ~ 3 つの値を用いて指定することができます。値は順不同です。すべての一括指定プロパティと同様に、除外したサブ値はその初期値に設定されます。
メモ:
多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が none
だからです。特筆すべき例外は input
要素で、ブラウザーが既定のスタイルを与えます。
値
<'outline-width'>
-
輪郭線の太さを設定します。未指定の場合の既定値は
medium
です。outline-width
を参照してください。 <'outline-style'>
-
輪郭線の種類を設定します。未指定の場合の既定値は
none
です。outline-style
を参照してください。 <'outline-color'>
-
輪郭線の色を設定します。既定値は、対応しているブラウザーでは
invert
で、それ以外ではcurrentcolor
です。outline-color
を参照してください。
解説
輪郭線は要素の境界線の外側の線です。輪郭線はボックスの他の領域とは異なり、空間を取らないので、文書内のレイアウトに影響を与えません。
輪郭線の外観に影響を与えるプロパティはいくつかあります。スタイル、色、幅は outline
プロパティを使用し、境界線からの距離は outline-offset
プロパティを使用し、角の丸みは border-radius
プロパティを使用することで変更することが可能です。
輪郭線は長方形であるとは限りません。複数行のテキストを扱う場合、ブラウザーによっては各行ごとに輪郭線を描画するものもあれば、テキスト全体を単一の輪郭線で囲むものもあります。
アクセシビリティ
outline
の値を 0
または none
にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
outline =
<'outline-width'> ||
<'outline-style'> ||
<'outline-color'>
<outline-width> =
<line-width>
<outline-style> =
auto |
<outline-line-style>
<outline-color> =
auto |
<color> |
<image-1D>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
例
輪郭線を使用してフォーカスのスタイルを設定
HTML
<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
CSS
a {
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 4px dotted #e73;
outline-offset: 4px;
background: #ffa;
}
結果
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 # outline |
ブラウザーの互換性
BCD tables only load in the browser