アウトラインプロパティ
最終更新：2026-09-13
outline アウトラインプロパティ
outline は要素のボーダーの外側に線を描くもので、主にフォーカスされた状態を示すために使われます。border と異なり、outline はスペースを占有せず、要素のサイズやページのレイアウトに影響を与えません。これはアウトラインの色・スタイル・幅を一度に設定するショートハンドです。
| カテゴリ | |
|---|---|
| 初期値 | medium none currentcolor |
| 継承 | いいえ |
| 適用対象 | all |
| アニメーションタイプ | shadow |
| CSS バージョン | CSS2 |
| 状態 | 標準 |
📝 構文
outline: <outline-color> || <outline-style> || <outline-width>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<outline-color> || <outline-style> || <outline-width> | 値 | アウトラインのショートハンド（スペースを占有せず、フォーカス表示に使用） |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v9 |
| すべての主要ブラウザーでサポート | |||||
重要： outline はアクセシビリティのフォーカス表示によく使われます。同等に明確な代替手段を提供しない限り、既定のフォーカススタイルを削除する outline: none は避けてください。
❓ よくある質問
Qoutline と border はどちらを使うべきですか？
A線がレイアウトに関与しボックスモデルの一部となる場合は border を使ってください。スペースを占有しない視覚的な手掛かり、特にキーボードフォーカスの状態には outline を使ってください。outline はボーダーの外側に描画され、要素のサイズに影響せず、outline-offset で要素から離すことができます。フォーカススタイルを outline: none で削除してはいけません。代わりに明確なカスタムの代替手段を提供してください。
Qoutline を丸くできますか？
Aはい。モダンブラウザ（Chrome 94+、Firefox 88+、Safari 16.4+）では、outline は要素自身の border-radius に沿って丸い角を描画します。古いブラウザでは四角に描画されます。形状を正確に制御したい場合は、box-shadow でシミュレートしてください。box-shadow は自然に丸い角に対応し、やはりスペースを占有しません。
Q既定の outline に代わる、見栄えの良いカスタムフォーカススタイルを作るにはどうすればよいですか？
Aoutline ショートハンドと outline-offset を組み合わせます。outline: 2px solid #0078d4; outline-offset: 2px; とすると、アウトラインと要素の間に小さな隙間が空きます。フォーカス表示を outline: none で削除してはいけません。キーボードユーザーに害を及ぼします。代わりに box-shadow で実装する場合は、コントラストが十分であることを確認してください。
Qoutline と box-shadow の違いは何ですか？
Aoutline はスタイルと幅を持つ線で、スペースを占有せず、モダンブラウザでは要素の丸い角に沿います。box-shadow はぼかしと拡散で枠線を疑似的に表現し（例: box-shadow: 0 0 0 2px red;）、複数の影や発光、内側の影に対応します。どちらもレイアウトに影響しませんが、box-shadow は破線を描けないため、フォーカススタイルでは両方を組み合わせることがよくあります。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
