CSS

【overflow】要素内容がボックスに収まらない時の設定

みいと

overflowプロパティでボックスに収まらない時の設定をする

overflowプロパティを使用すると、要素内容がボックスに収まらない時の設定をすることができます。

overflowプロパティには、下記の値を設定できます。

  • visible
  • hidden
  • scroll
  • auto

visible

visibleは、ボックスに収まらない部分を表示します。

下記の青い部分がボックスです。
visibleではボックスに収まらない内容は、ボックス外に表示されるようです。
overflowプロパティを使用すると、要素内容がボックスに収まらない時の設定をすることができます。

hidden

hiddenは、ボックスに収まらない部分は表示しません。

下記の青い部分がボックスです。
hiddenではボックスに収まらない内容は、何も表示されないようです。
overflowプロパティを使用すると、要素内容がボックスに収まらない時の設定をすることができます。

scroll

scrollは、ボックスに収まらない部分は表示せずに、スクロールで要素内容を見れるようにします。

下記の青い部分がボックスです。
hiddenではボックスに収まらない内容は、スクロールで見ることができます。
overflowプロパティを使用すると、要素内容がボックスに収まらない時の設定をすることができます。

auto

autoは、必要に応じてスクロールできるようにします。

下記の青い部分がボックスです。
autoではボックスに収まらない内容がある場合に、スクロール可能になります。
収まるパターン
こちらは、収まらないパターンです。収まらない部分は、スクロールすれば見ることができます。

ボックスに収まらない時の設定のまとめ

今回は、要素内容がボックスに収まらないときの設定についてまとめました。

これはどういうときに使用するのか、まだわからないので勉強せねば(;^ω^)

まとめ

  • overflowを使用すると、要素内容がボックスに収まらない時の設定ができる
  • visibleを指定すると、ボックスに収まらない部分はボックスの外に表示される
  • scrollを指定すると、ボックスに収まらない部分はスクロールで確認できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました