CSS Overflow
CSSのoverflowプロパティは、要素のコンテンツがその指定されたサイズ(幅や高さ)を超えた場合に、どのように表示するかを制御するプロパティです。
主に以下の4つの値があります。
プロパティ | 説明 |
---|---|
visible(デフォルト) | コンテンツがはみ出しても、はみ出た部分が表示されます。 |
hidden | はみ出た部分が非表示になります。スクロールバーは表示されません。 |
scroll | はみ出た部分が非表示になり、スクロールバーが常に表示されます。必要でなくてもスクロールバーが表示されます。 |
auto | はみ出た部分が非表示になり、必要に応じてスクロールバーが表示されます。 |
サンプルを見ればすぐわかると思います。
Visible
Hidden
Scroll
Auto
この例では、4つの異なるoverflowプロパティの値を適用した各コンテナに300px四方のコンテンツが配置されています。それぞれのコンテナは200px四方で、overflowプロパティによってはみ出た部分の表示が制御されています。
コメント