Outlines
outline-color は CSS のプロパティで、要素の輪郭線の色を設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 1.2 | 18 | 1 | |
transparent | 1 | 12 | 1 | 1.2 | 18 | 1 |
| その他 | ||||||
| outline-offset は CSS のプロパティで、要素の辺や境界線と輪郭線との空間の量を設定します。 | 1 | 15 | 1.5 | 1.2 | 18 | 1 |
| outline-style は CSS のプロパティで、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、border よりも外側です。 | 1 | 12 | 1.5 | 1.2 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1.5 | 1.2 | 18 | 1 |
dashed | 1 | 12 | 1 | 1.2 | 18 | 1 |
dotted | 1 | 12 | 1 | 1.2 | 18 | 1 |
double | 1 | 12 | 1 | 1.2 | 18 | 1 |
groove | 1 | 12 | 1 | 1.2 | 18 | 1 |
inset | 1 | 12 | 1 | 1.2 | 18 | 1 |
none | 1 | 12 | 1 | 1.2 | 18 | 1 |
outset | 1 | 12 | 1 | 1.2 | 18 | 1 |
ridge | 1 | 12 | 1 | 1.2 | 18 | 1 |
solid | 1 | 12 | 1 | 1.2 | 18 | 1 |
| その他 | ||||||
| CSS の outline-width プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 border よりも外側です。 | 1 | 12 | 1.5 | 1.2 | 18 | 1 |
| CSS プロパティ | ||||||
medium | 1 | 12 | 1 | 1.2 | 18 | 1 |
thick | 1 | 12 | 1 | 1.2 | 18 | 1 |
thin | 1 | 12 | 1 | 1.2 | 18 | 1 |
注釈 2件
削除済み
- このバージョンで機能が削除されました (3.6)
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
実装メモ
- Firefox 88 より前では、アウトラインは `border-radius` の形状に従いません。
注釈 3件
実装メモ
- Firefox 88 より前では、アウトラインは `border-radius` の形状に従いません。
削除済み
- このバージョンで機能が削除されました (3.6)
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 3件
実装メモ
- Firefox 88 より前では、アウトラインは `border-radius` の形状に従いません。
削除済み
- このバージョンで機能が削除されました (3.6)
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
基本構文
CSS
:focus-visible {
outline: 2px solid #2196f3;
outline-offset: 2px;
}
.debug * {
outline: 1px solid red;
}ライブデモ
実務での使いどころ
-
フォーカスインジケーターのカスタマイズ
キーボード操作時のフォーカス表示をoutlineでカスタマイズし、ブランドカラーに合った視認性の高いインジケーターを設定します。
注意点
- outline: noneでフォーカスインジケーターを消す場合は、必ず代替のフォーカス表示を提供してください。
アクセシビリティ
- フォーカスインジケーターを削除することはWCAG違反です。:focus-visibleに十分な視認性のoutlineを設定してください。