CSS基礎 練習問題 73：スクロール制御
📊 Qraftユーザーの成績
- 難易度 Bランク（レーティング1200）
- 難易度 766位/2795問中
- 正答率 —（0回）
親要素の高さよりも中のテキストが長くてはみ出す場合に、親要素内にスクロールバーを表示して最後まで読めるようにしたい場合、正しいCSSの書き方はどれか。
- overflow: scroll; を指定し、はみ出た部分をスクロールして見せる。
- overflow: hidden; を指定し、はみ出た部分を完全に隠して見えなくする。
- overflow: visible; を指定し、はみ出た部分を親要素の外側に表示させる。
- text-overflow: ellipsis; を指定し、はみ出た部分を三点リーダーにする。
- white-space: nowrap; を指定し、テキストが勝手に改行されないようにする。
正解と解説を見る
正解：overflow: scroll; を指定し、はみ出た部分をスクロールして見せる。
親要素からはみ出た内容をスクロールして見られるようにするには、`overflow: scroll;` が正解です。
【正解の理由】
`overflow` プロパティに `scroll` を指定すると、要素の枠内にスクロールバーが表示され、はみ出た部分をスクロールして確認できるようになります。
【不正解の理由】
• 「『overflow: hidden;』を指定し、はみ出た部分を完全に隠して見えなくする」は、スクロールバーが出ず内容が読めなくなってしまうため誤り
• 「『overflow: visible;』を指定し、はみ出た部分を親要素の外側に表示させる」は、枠外にはみ出したまま表示され、レイアウトが崩れる原因になるため誤り
• 「『text-overflow: ellipsis;』を指定し、はみ出た部分を三点リーダーにする」は、文字列の末尾を「…」にして省略するだけでスクロールはできないため誤り
• 「『white-space: nowrap;』を指定し、テキストが勝手に改行されないようにする」は、1行で表示し続けるための指定であり、スクロール制御ではないため誤り