1. TOP
  2. html&CSS入門
  3. cssのoverflowの使い方! hidden, scroll, autoの違いを解説

cssのoverflowの使い方! hidden, scroll, autoの違いを解説

overflowプロパティとは、ボックスの外側にはみ出した部分をどう扱うかを指定するためのプロパティです。

はみ出した部分は、隠す、表示する、スクロールさせるなどから選ぶことができます。

displayがinlineの要素には使えない?

overflowは、はみ出したときの挙動を指定するプロパティですので、displayがinlineの要素のように、幅や高さがコンテンツによって伸び縮みする要素には使えません。

displayについては下記の記事で解説しているので参考にしてください。

overflowの使い方

overflowプロパティを使うには下記のように記述します。

overflow:値;

ポイントとしては、値はキーワードで指定することと、複数指定できることです。

値はキーワードで指定

値はキーワードで指定します。主に使うキーワードは以下の4種類です。

  • visible
    初期値です。内容がボックスに収まらない場合、はみ出して表示します。
  • hidden
    内容がボックスに収まらない場合、収まらない部分を非表示にします。
  • scroll
    内容がボックスに収まらない場合、収まらない部分、スクロールして表示できるようになります。
  • auto
    ブラウザによって変わります。

値は横方向と縦方向の2つ指定可能

overflowプロパティは「横方向のはみ出し」を指定する overflow-xプロパティと、「縦方向のはみだし」を指定する overflow-yプロパティをまとめて指定することが出来るショートハンドプロパティです。

1つの値だけ指定した場合は横縦両方に適用され、2つ指定した場合は、1つ目が横方向、2つ目が縦方向の指定となります。2つの値を指定する場合は半角スペースで区切ります。

例えば、横方向も縦方向もhiddenにしたい場合、

overflow:hidden;

と記述してもいいですし、下記のように記述しても結果は同じになります。

overflow-x:hidden;
overflow-y:hidden;

同じように、横方向をvisible、縦方向をhiddenとしたい場合、下記の2つの記述方法のどちらを使っても同じ結果になります。

overflow:visible hidden;
overflow-x:visible;
overflow-y:hidden;

overflowを実際に使ってみよう

それぞれのキーワードを使って、どのような挙動になるのか実例を見てみましょう。

visible

visibleは初期値です。内容がボックスに収まらない場合、はみ出して表示します。

<div id="demo_221">
   <p>あああああああああ</p>
</div>
 #demo_221 {
   width: 50px;
   height: 50px;
   overflow: visible;
   background: tomato;
 }

あああああああああ

要素が下にはみ出して表示されていますね。このようにvisibleに設定すれば要素をはみ出してコンテンツが表示されます。

ちなみに横方向にはみ出していないのは、デフォルトの状態では「横幅に合わせて自動で改行する」という設定になっているからです。試しに、white-space:nowrapを指定して自動で改行をしないようにすると横にはみ出すことがわかります。

<div id="demo_222">
   <p>あああああああああ</p>
</div>
 #demo_222 {
   width: 50px;
   height: 50px;
   overflow: visible;
   background: tomato;
   white-space:nowrap;
 }

あああああああああ

hidden

hiddenは内容がボックスに収まらない場合、収まらない部分を非表示にします。実際に見てみましょう。

<div id="demo_223">
   <p>ああああああああああああああああ</p>
</div>
 #demo_223 {
   width: 50px;
   height: 100px;
   overflow: hidden;
   background: tomato;
 }

ああああああああああああああああ

ボックスからはみ出している部分が非表示になったのがわかります。

scroll

scrollは内容がボックスに収まらない場合、収まらない部分がスクロールできるようになります。

<div id="demo_224">
   <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
 #demo_224 {
   width: 100px;
   height: 100px;
   overflow: scroll;
   background: tomato;
 }

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

スクロールバーが現れて、スクロールして表示出来るようになりました。スクロールバーのデザインは、ブラウザの種類によって変わります。

ブラウザによっては、縦方向にだけスクロールさせたいのに、横方向にもスクロールバーが出る場合があります。

これは、値を一つだけ指定した場合、横方向と縦方向にその値が適用されるためです。縦方向にだけスクロールさせたい場合は、

overflow: hidden scroll;

という風に指定すると、横方向へのスクロールは表示されなくなります。

auto

overflow:autoとした場合、ブラウザの解釈によって変わります。現在のブラウザのほとんどがscrollを指定した場合と同じ挙動になります。

使い勝手が悪いので、特に理由がない場合は使う必要はないでしょう。

まとめ

  • overflowプロパティとは、ボックスの外側にはみ出した部分をどう扱うかを指定するためのプロパティ
  • はみ出した部分は、隠す、表示する、スクロールさせるなどから選ぶことができる
  • displayがinlineの要素には効かない
  • overflowプロパティは「横方向のはみ出し」を指定する overflow-xプロパティと、「縦方向のはみだし」を指定する overflow-yプロパティをまとめて指定することが出来るショートハンドプロパティである