outline
outline は CSS の一括指定プロパティで、輪郭線 (outline) に関する大部分のプロパティを単一の宣言で設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 94 | 94 | 88 | 16.4 | 94 | 16.4 | |
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 |
medium | 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 |
thick | 1 | 12 | 1 | 1.2 | 18 | 1 |
thin | 1 | 12 | 1 | 1.2 | 18 | 1 |
transparent | 1 | 12 | 1 | 1.2 | 18 | 1 |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (94)
実装メモ
- Chrome 94 より前では、「outline」は「border-radius」の形状に従いません。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (94)
実装メモ
- Edge 94 より前では、「outline」は「border-radius」の形状に従いません。
注釈 5件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (88)
- このバージョンで機能が削除されました (3.6)
実装メモ
- Firefox 88 より前では、`outline` は `border-radius` の形状に従いません。
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (16.4)
実装メモ
- Safari 16.4 より前では、「outline」は「border-radius」の形状に従いません。 バグ 20807 を参照してください。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (94)
実装メモ
- Chrome Android 94 より前では、`outline` は `border-radius` の形状に従いません。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (16.4)
実装メモ
- iOS 16.4 の Safari より前のバージョンでは、`outline` は `border-radius` の形状に従いません。 バグ 20807 を参照してください。
基本構文
CSS
/* Display only when the keyboard is in focus */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
/* Hide the focus ring when the mouse is clicked */
:focus:not(:focus-visible) {
outline: none;
}
/* Custom focus ring */
.button:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 3px;
border-radius: 4px;
}ライブデモ
実務での使いどころ
-
キーボードフォーカスインジケーター
:focus-visible で表示制御し、キーボード操作時のみ視覚的なフォーカスリングを表示する。
-
カスタムフォーカスリング
outline-offset と色のカスタマイズで、ブランドカラーに合わせたアクセシブルなフォーカスリングを作成する。
注意点
- outline: none を安易に使うとキーボードユーザーがフォーカス位置を把握できなくなる。必ず代替のフォーカス表示を用意する。
- outline は border-radius に必ずしも追従しない（ブラウザにより異なる。最新ブラウザでは追従する傾向）。
アクセシビリティ
- フォーカスインジケーターは WCAG 2.4.7 の要件。outline を削除する場合は必ず代替の視覚表示（box-shadow 等）を提供すること。
- コントラスト比は WCAG 2.4.11（非テキストコンテンツ）で少なくとも 3:1 を確保する。