演習課題「オーバーフローしたコンテンツを隠そう」
現在、ブラウザではオーバーフローが発生しています。
ここで、gozyuonnクラスのオーバーフローしたコンテンツを隠して閲覧できないようにしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「隠れているオーバーフローしたコンテンツを閲覧できるようにしよう」
現在、ブラウザではオーバーフローが発生しています。
また、オーバーフローしたコンテンツは隠れて閲覧できません。
そこで、gozyuonnクラスのoverflowプロパティにscrollを指定することで、オーバーフローしたコンテンツを閲覧できるように設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃01:オーバーフローしたコンテンツを隠す(overflow/hidden)
このチャプターでは、オーバーフローしたコンテンツの表示方法を学習します。
コンテンツの量が多すぎると、コンテンツが指定したボックスのサイズに収まらず、ボックスから溢れてしまうオーバーフローが発生します。
そのオーバーフローを起こしたコンテンツの表示方法を指定するプロパティとして、overflowプロパティが存在します。
また、overflow-xやoverflow-yプロパティを使うと、横方向または縦方向の表示方法を個別に指定することができます。overflowプロパティの主な値として、以下のものが存在します。
なお、デフォルトの状態ではボックスの下をはみ出して、オーバーフローしたコンテンツが表示されます。
・ オーバーフローしたコンテンツをそのまま縦方向に表示するvisible
・ オーバーフローしたコンテンツを隠して閲覧できなくするhidden
・ オーバーフローしたコンテンツを隠し、そのコンテンツを常に表示されるスクロールバーを使って閲覧できるようにするscroll
・ scrollと表示方法は同じですが、スクロールバーをブラウザの大きさによって表示するかを決めているauto
@charset "UTF-8";
.lipsum {
width: 200px;
height: 200px;
margin-left: 40px;
overflow: hidden;
background-color: lime;
}
@charset "UTF-8";
.lipsum {
width: 200px;
height: 200px;
margin-left: 40px;
overflow: scroll;
background-color: lime;
}