【CSS】overflowの使い方:hiddenやscrollの違いは?

overflowではみ出た部分の処理を決める

今回はCSSのoverflowと呼ばれるプロパティの使い方をまとめて解説します。

1. CSSのoverflowとは?

overflowとはCSSのプロパティの1つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。 プロパティとは?書き方は以下のようになります。

◯◯ {overflow:値;}

◯◯の部分はセレクタです。overflowを指定したい要素のタグ名やid、class名などを書きます。

overflowの4つの値

値には以下の4つのどれかを取ります。

  1. visible:初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり
  2. hidden:はみ出た部分が隠れる
  3. scroll:はみ出た部分が隠れてスクロールできる状態に
  4. auto:ブラウザにより表示が変わる(基本的にはスクロールできる状態に)

いきなり値を並べられてもしっくり来ないと思うので、1つずつ解説していきます。

2. overflow: visibleでそのまま表示

overflow:visibleだと基本的にはみ出た部分がそのまま表示されます。例として幅と高さが50pxずつの段落要素(p)に文章を入れてみましょう。

HTML
<p class="example">あいうえおあいうえおあいうえお</p>
CSS
.example {
	width: 50px;
	height: 50px;
	overflow: visible;
	background: skyblue;
	}
ブラウザ表示

overflowの例

↑水色の部分が要素のボックスです。

青色のボックスからはみ出てしまいました。上の例ではCSSでoverflow: visibleとしていますが、visibleは初期値なので、この部分が書かれていなくても同じ表示になります。

2-1. heightを指定しなければはみ出ない

さきほどの例ではheight:50pxにしていました。もしheightを指定しなかった場合はどのように表示されるのでしょうか。

CSS
.example {
	width: 50px;
	overflow: visible;
	background: skyblue;
	}
ブラウザ表示

visibleでもはみ出ない

このようにheightを指定しない(=height: auto)と、文字分だけ縦に要素が長くなるので、はみ出ることはありません。

2-2. 横にはみ出てしまった文字を折り返したいときは?

さきほどの例では縦にはみ出ていましたが、横にはきちんと収まっていました。しかし、もしwhite-spaceという行の折り返しを決めるプロパティで、nowrap(自動的に改行しない)を指定していると、横にはみ出るようになります。実際にコードを書いてみます。

CSS
.example {
	white-space: nowrap;
	width: 50px;
	overflow: visible;
	background: skyblue;
	}
ブラウザ表示

white-space:nowrapの場合


要素の幅を超えると、このようにはみ出てしまうのですね。もし、意図せず横にはみ出てしまった場合は、white-space:normalを指定すれば、右端で行が折り返されるようになります。normalは初期値なので、あまり指定する機会は多くないかとは思いますが知っておくと良いでしょう。詳しくはこちらの記事で解説しています。

3. overflow: hiddenで非表示に

overflow:hiddenを指定すると、要素のボックスからはみ出てしまった部分は隠れて見えなくなります。例を見てみましょう。

CSS
.example {
	width: 50px;
	height: 50px;
	overflow: hidden;
	background: skyblue;
}
ブラウザ表示

hiddenの場合

このようにhiddenだとボックスに収まりきらない部分は非表示になります。スクロールして表示させることもできません。

4. overflow: scrollでスクロールできるように

1番おさえておきたいポイントです。overflow: scrollを指定すると、はみ出た部分が隠れ、スクロールにより表示することができるようになります。

CSS
.example {
	width: 50px;
	height: 50px;
	overflow: scroll;
	background: skyblue;
}
ブラウザ表示

Overflow scroll

↑動画です。

このようにはみ出た部分をスクロールにより表示できます。

4-1.ブラウザごとのスクロールバー表示の違い

厄介なことに閲覧環境によってスクロールバーの表示が異なります。具体的な表示は以下のようになります。

環境 scrollの表示
IE(Windows) Windowsのスクロールバー
Mac macのスクロールバー
Android iphoneのスクロールバー
Mac androidのスクロールバー

ブラウザによって若干異なるのですが、基本的にWindowsだけはスクロールバーが常にボックスの下と右側に表示されます。MacやiPhoneなどではスクロールができる状態でも、何も触らないとスクロールバーは表示されません(スクロールを始めてはじめてスクロールバーが現れます)。

サルワカくんの顔(怒)
サルワカくん

IEだとスクロールバーがけっこう目立って、デザイン性が損なわれるんですよねぇ・・・。

4-2.横方向にスクロールできるようにする

縦方向のスクロールではなく、横方向にスクロールできるようにしたい場合もあるかと思います。そんなときは、overflow:scrollに加え、white-space:nowrapを指定しましょう。

CSS
.example{
	white-space:nowrap;
	overflow:scroll;
	width:50px; 
	height:50px; 
	background:skyblue;
}
ブラウザ表示

あいうえおあいうえおあいうえお

↑横にスクロールできます。

4-3.使わないスクロールバーを非表示に

上の例では、横方向か縦方向のどちらかにのみスクロールができました。

Windowsのスクロールバー

それなのにIEで表示すると縦と横の両方のスクロールバーも表示されてしまうのです。つまり使い道のないスクロールバーまで表示されてしまうわけですね。

overflow-xとoverflow-yの使い方

そんなときはoverflowの代わりに以下の2つのプロパティを使います。

  • overflow-x:横方向にはみ出た部分の扱いを決める
  • overflow-y:縦方向にはみ出た部分の扱いを決める

指定できる値はoverflowと基本的に同じで、overflow-x: scrollのように書きます。この2つを使うことで「縦方向だけスクロールできる状態にして、横方向のスクロールバーは非表示に」みたいなことができるわけですね。

サルワカくんの顔(通常)
サルワカくん

ちなみにこの2つのプロパティは元々、IEが独自に追加したプロパティです。とはいえ今はほとんど全てのブラウザで使うことができます。

試しに、縦方向にだけスクロールできるようにして、横方向のスクロールバーを非表示にしてみましょう。

CSS
.example{
	overflow-y: scroll;
	/*縦方向はスクロール可*/
	overflow-x: hidden;
	/*横方向はスクロール不可*/
	width:150px; 
	height:50px; 
	background:skyblue;
}
ブラウザ表示

overflow-xとoverflow-yを使う

↑IEで見た場合

使われない横方向のスクロールバーは表示されなくなりました。上の例ではoverflow-x: hiddenとしましたが、visibleでも同じです。どちらもスクロールできない値だからです。

5. overflow: autoとは?

overflow:autoとすると、はみ出た部分の処理をブラウザに委ねることになります。とはいえ、ほとんどの場合はscrollを指定した場合と同じようにスクロールバーが表示されます。

CSS
.example {
	width: 50px;
	height: 50px;
	overflow: auto;
	background: skyblue;
}
ブラウザ表示

Overflow scroll

↑動画です。

scrollを指定したときと同じように縦方向にスクロールができるようになりました。

6. 最後に

このようにoverflowoverflow-xoverflow-yによりはみ出た部分の処理を何かと指定しておくことができるわけですね。やはり環境によってある程度の差が出てしまうので、ウェブサイトを作ったときはできるだけ様々な端末、ブラウザで表示をチェックするのが良いのでしょうね。

サルワカ