Tailwind CSS 練習問題 44：輪郭線（アウトラインの非表示）
Tailwind CSSにおいて、ボタンや入力欄がフォーカスされた際にブラウザがデフォルトで表示する輪郭線（アウトライン）を非表示にしたい場合、正しいクラスはどれか。
- `outline-none`クラスを使用して、輪郭線を非表示にする。
- `border-none`クラスを使用して、輪郭線を非表示にする。
- `ring-0`クラスを使用して、輪郭線を非表示にする。
- `no-outline`クラスを使用して、輪郭線を非表示にする。
- `focus-hidden`クラスを使用して、輪郭線を非表示にする。
正解と解説を見る
正解：`outline-none`クラスを使用して、輪郭線を非表示にする。
Tailwind CSSでフォーカス時のデフォルトの輪郭線を消したい場合、`outline-none`が正解です。
【正解の理由】
`outline-none`クラスはCSSの`outline: 2px solid transparent; outline-offset: 2px;`などを適用し、視覚的なアウトラインを隠しつつアクセシビリティを保つ正しい手法です。
【不正解の理由】
• 「`border-none`クラスを使用して、輪郭線を非表示にする」は誤り。これは境界線（border）を消すもので、アウトラインとは異なります
• 「`ring-0`クラスを使用して、輪郭線を非表示にする」は誤り。これはTailwind独自のリングシャドウの幅を0にするもので、ブラウザ標準のアウトラインを消すものではありません
• 「`no-outline`クラスを使用して、輪郭線を非表示にする」は誤り。Tailwindにそのような標準クラスは存在しません
• 「`focus-hidden`クラスを使用して、輪郭線を非表示にする」は誤り。Tailwindにそのような標準クラスは存在しません