コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
overflowプロパティの役割
このレッスンでは overflowプロパティが どういう役割を果たすのかということを ご紹介します。 overflowというプロパティ、 いくつかの値を取るんですが、 今回は3つご紹介します。 auto と hidden と visible です。 現在、p要素3つがあるんですけれども、 ボーダーを設定してあります。 まだoverflowプロパティは 設定していません。 overflowプロパティを設定する前に このp要素に対して 高さを固定しましょう。 width はあるんですが、 高さ height ですね。 height をちょっと小さくします。 2.5em ということで まずこれでどうなったか確認しましょう。 高さは 2.5em に固定したんですが、 中のテキストあふれてしまってますね。 このあふれることを overflowというんですが、 これをどういうふうに 表示するかということを overflowプロパティは 設定することができます。 3つのp要素にはそれぞれ 設定する値がクラスとして 定めてあります。 ですからこのクラスに対して overflowのプロパティを設定します。 まずは順番どおり、 auto ですね。 auto に対して overflow で 文字どおり auto と。 次に hidden ですね、に対しては overflow を hidden。 そして3つ目、 ちょっと隠れてしまいましたから、 スクロールします。 visible ですね。 そして overflow の visible ということで 確認をしてみましょう。 ファイルを保存します。 まず auto は この高さ height を超えると そのテキストをスクロールして 見られるように自動的に スクロールバーを表示してくれます。 hidden というのは あふれてしまったところは 隠して見えないようにします。 visible、これはあふれても構わず そのまま表示するということで これが実はデフォルトなんですね。 ですから先ほどは 上のテキストが下にあふれて 重なってしまったということです。 このレッスンでは、overflowプロパティの 3つの値をご紹介しました。 ひとつ、auto は あふれると自動的にスクロールバーを出す。 hidden はあふれた部分はカットして…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。