無理しないでゆっくり休んでね!

CSS Overflow

CSSのoverflowプロパティは、要素のコンテンツがその指定されたサイズ(幅や高さ)を超えた場合に、どのように表示するかを制御するプロパティです。

主に以下の4つの値があります。

プロパティ 説明
visible(デフォルト) コンテンツがはみ出しても、はみ出た部分が表示されます。
hidden はみ出た部分が非表示になります。スクロールバーは表示されません。
scroll はみ出た部分が非表示になり、スクロールバーが常に表示されます。必要でなくてもスクロールバーが表示されます。
auto はみ出た部分が非表示になり、必要に応じてスクロールバーが表示されます。

サンプルを見ればすぐわかると思います。

Visible

Hidden

Scroll

Auto

この例では、4つの異なるoverflowプロパティの値を適用した各コンテナに300px四方のコンテンツが配置されています。それぞれのコンテナは200px四方で、overflowプロパティによってはみ出た部分の表示が制御されています。

コメント

タイトルとURLをコピーしました