outline を使いこなすと「枠線とは違う強調」ができる
outline は border と似ていますが、ボックスモデルの外側に描画される“外枠”です。
フォームのフォーカスリング、アクセシビリティ対応、選択状態の強調など、
UI をより使いやすくするための重要なプロパティです。
CSS と Tailwind CSS の両方で、初心者でも直感的に理解できるように丁寧に解説します。
outline と border の違い（ここが最重要）
outline は「レイアウトに影響しない」
border: 2px solid red; /* 要素のサイズが変わる */
outline: 2px solid red; /* 要素のサイズは変わらない */
border はボックスモデルの一部なので、
太くすると要素のサイズが変わります。
outline は 外側に重ねて描画されるだけ なので、
サイズが変わらず、レイアウトが崩れません。
深掘り：outline は「アクセシビリティのために存在する」
キーボード操作でフォーカスしたときに表示される青い枠線。
あれが outline です。
button:focus {
outline: 2px solid #3182ce;
}
outline を消すとアクセシビリティが下がるため、
最近は「消さずにデザインする」方向が主流です。
outline の基本構文
outline: 太さ 種類 色;
例：
outline: 3px solid #3182ce;
border と同じく順番は自由です。
Tailwind CSS の outline
Tailwind では outline-* クラスを使います。
outline
outline-2
outline-4
outline-dashed
outline-offset-2
outline-blue-600
パターン1：フォーカス時に青い枠線を出す（基本）
CSS版
input:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}
Tailwind版
<input
class="outline-none focus:outline-blue-600 focus:outline-2 focus:outline-offset-2"
/>
outline-offset を使うと、
枠線が少し外側に離れて描画され、見やすくなります。
パターン2：ボタンのフォーカスリングをデザインする
CSS版
button:focus {
outline: 3px solid rgba(99, 102, 241, 0.6);
outline-offset: 3px;
}
Tailwind版
<button
class="px-4 py-2 bg-indigo-600 text-white rounded
focus:outline-indigo-400 focus:outline-3 focus:outline-offset-4"
>
送信
</button>
アクセシビリティを保ちながらデザイン性も高める
現代的な UI の基本です。
パターン3：選択状態を outline で表現する（border を使わない）
CSS版
.card.selected {
outline: 3px solid #38b2ac;
outline-offset: 4px;
}
Tailwind版
<div class="p-4 rounded border border-gray-200
data-selected='true'
[data-selected='true']:outline-teal-500
[data-selected='true']:outline-4
[data-selected='true']:outline-offset-4">
選択されたカード
</div>
border を変えるとレイアウトがズレるため、
outline を使うと「ズレない選択状態」が作れます。
パターン4：エラー状態を outline で強調する
CSS版
input.error {
outline: 3px solid #e53e3e;
outline-offset: 2px;
}
Tailwind版
<input class="outline-red-500 outline-2 outline-offset-2">
フォームのエラー表示に最適です。
パターン5：outline-offset で“浮いて見える”効果を作る
CSS版
.box {
outline: 2px solid #4a5568;
outline-offset: 6px;
}
Tailwind版
<div class="outline outline-2 outline-gray-600 outline-offset-8 p-4">
浮いて見えるボックス
</div>
outline-offset を大きくすると、
影のような“浮遊感”が出ます。
outline の深掘りポイント
1. outline は border と違って角丸に追従しない
border-radius: 12px;
outline: 2px solid red;
→ outline は角丸にならず、四角いまま
Tailwind でも同じです。
これは仕様なので、
角丸の outline を作りたい場合は box-shadow を使う のが正解です。
2. outline は複数指定できない（1つだけ）
border は上下左右で別々に指定できますが、
outline は 1 本だけです。
3. outline は hover と focus の組み合わせで使うと効果的
button:hover,
button:focus {
outline: 2px solid #3182ce;
}
Tailwind
<button class="hover:outline-blue-500 focus:outline-blue-500">
4. outline を消すときはアクセシビリティに注意
outline: none;
これはキーボード操作のユーザーにとって危険です。
代わりに「デザインされたフォーカスリング」を付けるのがベスト。
実践テンプレート：よく使う outline UI
入力欄（フォーカス時に青いリング）
<input
class="border border-gray-300 rounded px-3 py-2
focus:outline-blue-600 focus:outline-2 focus:outline-offset-2"
/>
選択カード（ズレない選択状態）
<div class="p-4 rounded-lg border border-gray-200
data-selected='true'
[data-selected='true']:outline-teal-500
[data-selected='true']:outline-4
[data-selected='true']:outline-offset-4">
カード
</div>
ボタン（アクセシブルなフォーカスリング）
<button
class="px-4 py-2 bg-indigo-600 text-white rounded
focus:outline-indigo-400 focus:outline-4 focus:outline-offset-4">
送信
</button>
まとめ
outline は border と似ているようで、
レイアウトに影響しない外枠という全く別の役割を持っています。
- サイズが変わらない
- フォーカスリングに最適
- 選択状態の強調に便利
- outline-offset でデザイン性アップ
- 角丸には追従しない（仕様）
- Tailwind では outline-* と outline-offset-* を使う
