目次
あらすじ
皆さんoverflowプロパティとはご存知でしょうか。
名前は聞いたことあるけど、よくわからない。
名前も聞いたこともない。
といった方に向けて、今回はoverflowプロパティとはどのようなものなのかをご紹介していきたいと思います。
具体的には、
- overflowプロパティとは
- overflowプロパティの値
- overflow-xとoverflow-y
といった項目でご紹介していきます。
overflowプロパティとは
overflowプロパティとは、ある要素の中に中身が収まりきらなかった際に、どのように表示するかを決めることができるプロパティです。
例えば、下記を一度ご覧ください。
See the Pen
GRKPggd by 萩原 英 (@suguru1989)
on CodePen.
文章が長すぎて、div要素の中からはみ出てしまっているのがお分かりいただけるかと思います。
overflowプロパティではこのはみ出てしまっている部分を、隠したり、スクロールして見れるようにしたり、そのまま表示したり、といった風に設定することができます。
overflowプロパティの値
overflowプロパティの具体的な値には
- visible
- hidden
- crip
- scroll
- auto
といったものがあります。
それぞれについて詳しく見ていきましょう。
visible
記載方法
overflow: visible;
visibleとは日本語にすると、「見える」といった意味なります。
その意味の通り、例え要素内からはみ出てもそのまま表示させたい際に使用する値です。
See the Pen
XWroJmX by 萩原 英 (@suguru1989)
on CodePen.
上記のように、値にvisibleを指定すると要素からはみ出てもそのまま表示してくれます。
記載方法
overflow: hidden;
hiddenの場合はvisibleとは異なり、要素からはみ出た内容を隠す際に使う値です。
hiddenは視覚的には消えていますが、プログラム上ではスクロールの値と同じ、「スクロール・コンテイナー(スクロールができる箱のようなもの)」として認識されています。
hiddenは日本語で「隠れた」という意味です。
このことからもわかるように、完全に削除されたわけではなく、単に隠れていると考えてもらえればわかりやすいかと思います。
See the Pen
xxKmbZg by 萩原 英 (@suguru1989)
on CodePen.
上記のように要素からはみ出た内容は完全に削除されたわけではなく、隠されているだけなのです。
clip
記載方法
overflow: clip;
clipは、表示のされ方はhiddenと同じです。
しかし、hiddenは単に内容が隠れているだけで完全に削除されたものではないのに対し、clipはプログラム上からも切り取られています。
これによってclipはプログラム上でも、スクロール・コンテイナー(スクロールができる箱のようなもの)」とは認識されていません。
ここがhiddenとclipが大きく異なるポイントです。
Scroll
記載方法
overflow: scroll;
このscrollがoverflowプロパティの中では一番使い勝手がいい値といってもいいのではないでしょうか。
scrollを値に指定すると、要素内から内容がはみ出てもスクロールして内容が見れるようになります。
See the Pen
yLBGyJL by 萩原 英 (@suguru1989)
on CodePen.
Auto
記載方法
overflow: auto;
autoとは、必要な場合のみスクロールバーが表示されます。
要はユーザーの利用環境などによって、要素から内容が溢れている場合に、必要に応じてスクロールバーが表示さえ、ユーザー環境が要素内に内容が収まっていると判断したらvisibleと同じ表示のされ方をします。
See the Pen
eYObmqR by 萩原 英 (@suguru1989)
on CodePen.
overflow-xとoverflow-y
overflow-xは横に対しての値を指定する際に使用し、overflow-yは縦に対しての値を指定する際に使用します。
例えば、
具体例1
overflow-x: hidden;
overflow-y: scroll;
といった場合であれば、横に対しては表示させず、縦に対してはスクロールを指定していることになります。
See the Pen
WNeLvvw by 萩原 英 (@suguru1989)
on CodePen.
また、
具体例2
overflow: hidden scroll;
といったように2つの値を指定した場合、最初の値が横(overflow-x)に対しての値となり、次の値が縦(overflow-y) に対しての値となります。
このことから具体例1と具体例2は同じだということが言えます。
参照元：W3Cホームページ
まとめ
いかがだったでしょうか。
使用頻度こそ多くはないものの、覚えておくと非常に便利なプロパティであることは間違いないでしょう。
特にスクロールに関しては便利ですので、ぜひこれを機に覚えてみてはいかがでしょうか。
