スキルテスト: オーバーフロー
このスキルテストの目的は、 CSS のオーバーフローとその管理方法方法を理解しているかどうかを評価することです。
メモ: このページのインタラクティブエディターや、CodePen、JSFiddle、Glitchなどのオンラインエディターで解決策を試すことができます。
もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。
課題 1
この課題では、高さが固定されているため、コンテンツがボックスからはみ出しています。高さは維持したまま、オーバーフローを発生させるのに十分なテキストがある場合にのみ、ボックスにスクロールバーを表示させるようにしてください。 HTML からテキストの一部を除去し、テキストが少量しかなくオーバーフローがなくなった場合、スクロールバーが現れないことをテストしてください。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。
課題 2
この課題では、ボックスの中に、ボックスの寸法よりも大きい画像があり、それが目に見えるほどはみ出しています。ボックスの外側の画像は隠れるように変更してください。
最終的には下記画像のようになるはずです。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の段階のファイルをダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。