CSSプロパティのoverflowとは?hidden,scroll,visibleそれぞれの使い方

皆さんoverflowプロパティとはご存知でしょうか。
 
名前は聞いたことあるけど、よくわからない。
名前も聞いたこともない。

といった方に向けて、今回はoverflowプロパティとはどのようなものなのかを解説していきたいと思います。

具体的には、

といった項目でご紹介していきます。

合わせて読みたい

CSS3とは？初心者必見！プロパティ、セレクタ、バージョン、文法など

2019.8.18

あらすじ CSSとはどのような言語で、どのような働きをするものなのでしょうか。 今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。 具体的には CSSとは CSSの文法 CSSのバージョン CSSプロパティの代表例 といった項目に分けてご紹介していきます。...

overflowプロパティとは

overflowプロパティとは、ある要素の中に中身が収まりきらなかった際に、どのように表示するかを決めることができるプロパティです。

例えば、下記を一度ご覧ください。

See the Pen
GRKPggd by 萩原 英 (@suguru1989)
on CodePen.

文章が長すぎて、div要素の中からはみ出てしまっているのがお分かりいただけるかと思います。

overflowプロパティではこのはみ出てしまっている部分を、隠したり、スクロールして見れるようにしたり、そのまま表示したり、といった風に設定することができます。

overflowプロパティの値

overflowプロパティの具体的な値には

といったものがあります。

それぞれについて詳しく見ていきましょう。

visible

記載方法
overflow: visible;

visibleとは日本語にすると、「見える」といった意味なります。

その意味の通り、例え要素内からはみ出てもそのまま表示させたい際に使用する値です。

See the Pen
XWroJmX by 萩原 英 (@suguru1989)
on CodePen.

上記のように、値にvisibleを指定すると要素からはみ出てもそのまま表示してくれます。

hidden

記載方法
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ホームページ

合わせて読みたい

CSSのfilterの使い方解説！画像をおしゃれにできる！

2020.4.4

あらすじ みなさん、CSSにfilterというプロパティがあるのはご存知でしたでしょうか。 このfilterプロパティとは、透明度やぼやかし、明るさ、コントラストといった、画像に様々な変化を加えることができるもので、Photoshopを使ってしかできないと思っていた画像の追加効果をCSSだけで実装...

まとめ

いかがだったでしょうか。

使用頻度こそ多くはないものの、覚えておくと非常に便利なプロパティであることは間違いないでしょう。

特にスクロールに関しては便利ですので、ぜひこれを機に覚えてみてはいかがでしょうか。