【radial-gradient】放射状のグラデーション
みいと
おじさんのWEBデザイン学習まとめ
【overflow】要素内容がボックスに収まらない時の設定
みいと
overflowプロパティでボックスに収まらない時の設定をする
overflowプロパティを使用すると、要素内容がボックスに収まらない時の設定をすることができます。
overflowプロパティには、下記の値を設定できます。
- visible
- hidden
- scroll
- auto
visible
visibleは、ボックスに収まらない部分を表示します。
下記の青い部分がボックスです。
visibleではボックスに収まらない内容は、ボックス外に表示されるようです。
overflowプロパティを使用すると、要素内容がボックスに収まらない時の設定をすることができます。
hidden
hiddenは、ボックスに収まらない部分は表示しません。
下記の青い部分がボックスです。
hiddenではボックスに収まらない内容は、何も表示されないようです。
scroll
scrollは、ボックスに収まらない部分は表示せずに、スクロールで要素内容を見れるようにします。
下記の青い部分がボックスです。
hiddenではボックスに収まらない内容は、スクロールで見ることができます。
overflowプロパティを使用すると、要素内容がボックスに収まらない時の設定をすることができます。
auto
autoは、必要に応じてスクロールできるようにします。
下記の青い部分がボックスです。
autoではボックスに収まらない内容がある場合に、スクロール可能になります。
収まるパターン
こちらは、収まらないパターンです。収まらない部分は、スクロールすれば見ることができます。
ボックスに収まらない時の設定のまとめ
今回は、要素内容がボックスに収まらないときの設定についてまとめました。
これはどういうときに使用するのか、まだわからないので勉強せねば(;^ω^)
まとめ
- overflowを使用すると、要素内容がボックスに収まらない時の設定ができる
- visibleを指定すると、ボックスに収まらない部分はボックスの外に表示される
- scrollを指定すると、ボックスに収まらない部分はスクロールで確認できる
ABOUT ME
興味を持ったものをいろいろと勉強しています。
