Tailwind CSS 練習問題 20:Tailwindのオーバーフロー(overflow)ユーティリティ
Tailwind CSSにおいて、要素の垂直方向のオーバーフローが発生した場合にスクロールバーを表示させたい場合、正しいクラスはどれか。
- overflow-y-scroll
- overflow-x-scroll
- scroll-y
- overflow-hidden
- overflow-visible
正解と解説を見る
正解:overflow-y-scroll
Tailwind CSSで垂直方向のオーバーフロー時に常にスクロールバーを表示させるには`overflow-y-scroll`を使います。これは`overflow-y: scroll;`に対応します。
【正解の理由】
`overflow-y-scroll`は垂直(y軸)方向のオーバーフローの挙動を制御し、内容が要素の高さを超えた場合にスクロールバーを表示します。
【不正解の理由】
• 「overflow-x-scroll」:水平(x軸)方向のオーバーフローを制御するクラスであり、垂直方向の指定にはならない
• 「scroll-y」:Tailwindの実際のオーバーフロー制御クラスとしては存在しない表記
• 「overflow-hidden」:オーバーフローした内容を非表示にするクラスであり、スクロールバーは表示されない
• 「overflow-visible」:オーバーフローした内容をそのまま表示(はみ出させる)するクラスであり、スクロールバーは表示されない