おすすめ記事
overflow
スポンサーリンク

あらすじ

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

 

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

 

具体的には、

  • overflowプロパティとは
  • overflowプロパティの値
  • overflow-xとoverflow-y

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

 

そもそもCSSが分からない!といった方はこちらの記事をご覧ください

 

スポンサーリンク

overflowプロパティとは

 

overflow

 

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

 

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

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

 

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

 

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

 

スポンサーリンク

overflowプロパティの値

 

overflow scroll

 

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

  • visible
  • hidden
  • crip
  • scroll
  • auto

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

 

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

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はプログラム上でも、スクロール・コンテイナー(スクロールができる箱のようなもの)」とは認識されていません。

 

ここがhiddenclipが大きく異なるポイントです。

 

Scroll

 

記載方法
overflow: scroll;

 

このscrolloverflowプロパティの中では一番使い勝手がいい値といってもいいのではないでしょうか。

 

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

 

scroll-bar

 

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ホームページ

 

まとめ

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

 

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

 

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

 

 

スポンサーリンク

Twitterでフォローしよう!

おすすめの記事