確認テスト: オーバーフロー
この確認テストの目的は、 CSS のオーバーフローとその管理方法方法を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、確認テスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
オーバーフロー 1
この課題では、高さが固定されているため、コンテンツがボックスからはみ出しています。
この課題を完成させるには、次のようにしてください。
- CSS を更新し、ボックスの高さを維持しつつ、オーバーフローが発生するほどテキストが大量にある場合にのみスクロールバーが現れるようにしてください。
- HTML から一部のテキストを削除し、テキストの量が少ない場合にスクロールバーが現れないことを確認して、解決策を検証してください。
この課題の出発点は次のようなものです。
基盤となる出発点のコードは次の通りです。
html
<div class="box">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 5px solid black;
padding: 1em;
height: 200px;
width: 300px;
}
スタイル設定を更新すると、このようになります。
ここをクリックすると、模範解答を表示します。
コンテンツがあふれたときにのみボックスにスクロールバーが追加されるように、overflow: auto を追加してください。
css
.box {
overflow: auto;
}
オーバーフロー 2
この課題では、ボックスの中に、ボックスの寸法よりも大きい画像があり、それが目に見えるほどはみ出しています。ボックスの外側の画像は隠れるように変更してください。
この課題の出発点は次のようなものです。
基盤となる出発点のコードは次の通りです。
html
<div class="box">
<img
alt="flowers"
src="https://mdn.github.io/shared-assets/images/examples/flowers.jpg" />
</div>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 5px solid black;
height: 200px;
width: 300px;
}
スタイル設定を更新すると、このようになります。
ここをクリックすると、模範解答を表示します。
overflow: hidden を .box セレクターに追加する必要があります。
css
.box {
overflow: hidden;
}