記事内に商品プロモーションが含まれる場合があります
今回はCSSのoverflowと呼ばれるプロパティの使い方をまとめて解説します。
1. CSSのoverflowとは？
overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。 プロパティとは？書き方は以下のようになります。
◯◯ {overflow:値;}
◯◯の部分はセレクタです。overflowを指定したい要素のタグ名やid、class名などを書きます。
overflowの4つの値
値には以下の4つのどれかを取ります。
- visible：初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり
- hidden：はみ出た部分が隠れる
- scroll：はみ出た部分が隠れてスクロールできる状態に
- auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）
いきなり値を並べられてもしっくり来ないと思うので、１つずつ解説していきます。
2. overflow: visibleでそのまま表示
overflow:visibleだと基本的にはみ出た部分がそのまま表示されます。例として幅と高さが50pxずつの段落要素（p）に文章を入れてみましょう。
<p class="example">あいうえおあいうえおあいうえお</p>CSS
.example {
width: 50px;
height: 50px;
overflow: visible;
background: skyblue;
}
↑水色の部分が要素のボックスです。
青色のボックスからはみ出てしまいました。上の例ではCSSでoverflow: visibleとしていますが、visibleは初期値なので、この部分が書かれていなくても同じ表示になります。
2-1. heightを指定しなければはみ出ない
さきほどの例ではheight:50pxにしていました。もしheightを指定しなかった場合はどのように表示されるのでしょうか。
.example {
width: 50px;
overflow: visible;
background: skyblue;
}
このようにheightを指定しない（＝height: auto）と、文字分だけ縦に要素が長くなるので、はみ出ることはありません。
2-2. 横にはみ出てしまった文字を折り返したいときは？
さきほどの例では縦にはみ出ていましたが、横にはきちんと収まっていました。しかし、もしwhite-spaceという行の折り返しを決めるプロパティで、nowrap（自動的に改行しない）を指定していると、横にはみ出るようになります。実際にコードを書いてみます。
.example {
white-space: nowrap;
width: 50px;
overflow: visible;
background: skyblue;
}
要素の幅を超えると、このようにはみ出てしまうのですね。もし、意図せず横にはみ出てしまった場合は、white-space:normalを指定すれば、右端で行が折り返されるようになります。normalは初期値なので、あまり指定する機会は多くないかとは思いますが知っておくと良いでしょう。詳しくはこちらの記事で解説しています。
3. overflow: hiddenで非表示に
overflow:hiddenを指定すると、要素のボックスからはみ出てしまった部分は隠れて見えなくなります。例を見てみましょう。
.example {
width: 50px;
height: 50px;
overflow: hidden;
background: skyblue;
}
このようにhiddenだとボックスに収まりきらない部分は非表示になります。スクロールして表示させることもできません。
4. overflow: scrollでスクロールできるように
１番おさえておきたいポイントです。overflow: scrollを指定すると、はみ出た部分が隠れ、スクロールにより表示することができるようになります。
.example {
width: 50px;
height: 50px;
overflow: scroll;
background: skyblue;
}
↑動画です。
このようにはみ出た部分をスクロールにより表示できます。
4-1.ブラウザごとのスクロールバー表示の違い
厄介なことに閲覧環境によってスクロールバーの表示が異なります。具体的な表示は以下のようになります。
| 環境 | scrollの表示 |
|---|---|
| IE（Windows） | |
| Mac | |
| Android | |
| Mac | |
ブラウザによって若干異なるのですが、基本的にWindowsだけはスクロールバーが常にボックスの下と右側に表示されます。MacやiPhoneなどではスクロールができる状態でも、何も触らないとスクロールバーは表示されません（スクロールを始めてはじめてスクロールバーが現れます）。
IEだとスクロールバーがけっこう目立って、デザイン性が損なわれるんですよねぇ・・・。
4-2.横方向にスクロールできるようにする
縦方向のスクロールではなく、横方向にスクロールできるようにしたい場合もあるかと思います。そんなときは、overflow:scrollに加え、white-space:nowrapを指定しましょう。
.example{
white-space:nowrap;
overflow:scroll;
width:50px;
height:50px;
background:skyblue;
}
あいうえおあいうえおあいうえお
↑横にスクロールできます。
4-3.使わないスクロールバーを非表示に
上の例では、横方向か縦方向のどちらかにのみスクロールができました。
それなのにIEで表示すると縦と横の両方のスクロールバーも表示されてしまうのです。つまり使い道のないスクロールバーまで表示されてしまうわけですね。
overflow-xとoverflow-yの使い方
そんなときはoverflowの代わりに以下の２つのプロパティを使います。
- overflow-x：横方向にはみ出た部分の扱いを決める
- overflow-y：縦方向にはみ出た部分の扱いを決める
指定できる値はoverflowと基本的に同じで、overflow-x: scrollのように書きます。この２つを使うことで「縦方向だけスクロールできる状態にして、横方向のスクロールバーは非表示に」みたいなことができるわけですね。
ちなみにこの２つのプロパティは元々、IEが独自に追加したプロパティです。とはいえ今はほとんど全てのブラウザで使うことができます。
試しに、縦方向にだけスクロールできるようにして、横方向のスクロールバーを非表示にしてみましょう。
.example{
overflow-y: scroll;
/*縦方向はスクロール可*/
overflow-x: hidden;
/*横方向はスクロール不可*/
width:150px;
height:50px;
background:skyblue;
}
↑IEで見た場合
使われない横方向のスクロールバーは表示されなくなりました。上の例ではoverflow-x: hiddenとしましたが、visibleでも同じです。どちらもスクロールできない値だからです。
5. overflow: autoとは？
overflow:autoとすると、はみ出た部分の処理をブラウザに委ねることになります。とはいえ、ほとんどの場合はscrollを指定した場合と同じようにスクロールバーが表示されます。
.example {
width: 50px;
height: 50px;
overflow: auto;
background: skyblue;
}
↑動画です。
scrollを指定したときと同じように縦方向にスクロールができるようになりました。
6. 最後に
このようにoverflowやoverflow-x、overflow-yによりはみ出た部分の処理を何かと指定しておくことができるわけですね。やはり環境によってある程度の差が出てしまうので、ウェブサイトを作ったときはできるだけ様々な端末、ブラウザで表示をチェックするのが良いのでしょうね。
