CSS基礎 練習問題 38:CSSプロパティ:領域からはみ出た内容の表示制御
要素の内容が指定した領域からはみ出た場合に、はみ出た部分を非表示にしたい場合、正しいCSSの書き方はどれか。
- overflow: hidden;
- overflow: visible;
- overflow: scroll;
- display: none;
- visibility: hidden;
正解と解説を見る
正解:overflow: hidden;
overflowプロパティにhiddenを指定すると、要素の指定領域からはみ出た内容だけを切り取って非表示にできます。
【正解の理由】
overflow: hidden;は、ボックスの大きさを超えた内容部分だけを見えなくし、要素自体やその中の収まっている内容は通常どおり表示されます。
【不正解の理由】
• 「overflow: visible;」:これは初期値であり、はみ出た内容もそのまま表示してしまうため、非表示にはならない
• 「overflow: scroll;」:はみ出た部分をスクロールバーで見られるようにする指定であり、非表示にはならない
• 「display: none;」:要素全体をレイアウトごと完全に消してしまうため、収まっている部分まで見えなくなってしまう
• 「visibility: hidden;」:要素全体を見えなくするが、レイアウト上の領域は保持されたままで、はみ出た部分だけを制御する指定ではない