今回は、overflow
について紹介します。
そんなに使う機会はないけど、知ってたら「なるほど、なるほど!」って感じになります。
では。
overflowの指定方法
overflow
とは、日本語で「溢れる」という意味。
例えば、こんな感じで高さを指定した時、文字が溢れたと言えるかもしれません。
<p>おほほほ<br>おほほほ<br>おほほほ</p>
p {
border: solid 1px #000000;
width: 100px;
heigth: 40px;
}
おほほほ
おほほほ
おほほほ
枠線が<p>のエリアです。
文字がはみ出てますね。
で、この時にoverflow
を使います。
<p>おほほほ<br>おほほほ<br>おほほほ</p>
p {
border: solid 1px #000000;
width: 100px;
heigth: 40px;
overflow: hidden;
}
おほほほ
おほほほ
おほほほ
overflow: hidden
ではみ出た文字が隠れましたね。
じゃあ、overflow: scroll
としてみましょうか。
<p>おほほほ<br>おほほほ<br>おほほほ</p>
p {
border: solid 1px #000000;
width: 100px;
heigth: 40px;
overflow: scroll;
}
おほほほ
おほほほ
おほほほ
↑
縦にスクロールしてください。
縦にスクロールができたと思います。
ブラウザによって、実際にスクロールしないとスクロールバーが出現しないってのがあるみたいです。
その場合だと、やや分かりにくいかもですね。
じゃあ、overflow: visible
とします。
<p>おほほほ<br>おほほほ<br>おほほほ</p>
p {
border: solid 1px #000000;
width: 100px;
heigth: 40px;
overflow: visible;
}
おほほほ
おほほほ
おほほほ
はみ出ましたね。
visible
は初期値です。
※visible…見える。
※初期値…要素にプロパティを指定していない時、はじめから与えられている値


【参考記事】初期値の使い所を理解する
ですから、1番はじめにoverflow
を指定しなかった時は文字がはみ出ていたんですね。
overflowの値
改めてoverflow
の値はこちらになります。
- visible(初期値)
- hidden
- scroll
- auto
auto
はブラウザに表示方法を任せる値です。
※ブラウザ…Google ChromeやSafariなどのこと。
つまり、テキストがはみ出た時、はみ出たままなのか・隠すだけなのか・スクロールを発生させるのかは、ブラウザ次第ということ。
とは言っても、たいていははみ出した場合、スクロールが発生するようです。
ちなみに、このようにブラウザに表示方法を任せるのをユーザーエージェントに依存するって言うそうです。
ちょっとそれっぽかったので、使ってみました…
【参考記事】ブラウザで使われているcss【user agent stylesheet】
overflow: scrollの使いどころ
なんとなくoverflowで何ができるかは分かっていただけたと思います。
ここでは、overflowの使いどころを紹介します。
と言っても、2つしか思いつきませんでしたが…
というわけで、まずは1つ目。
overflow: scroll
です。
じつは…というほどでもないですが、ここまで見てきた中にoverflow: scroll
は使われています。
このコードです↓
<p>おほほほ<br>おほほほ<br>おほほほ<br>おほほほ<br>おほほほ…ほほほ</p>
よかったら、検証画面を開いて↑のコードを探してみてください。
スマホの人は毎度、何かすみません。

overflow-x: scroll
と指定していますね。
このoverflow-x
は横方向にスクロールを発生させます。
overflow-y
なら縦です。
white-space: pre
というのは、文字の折り返しをせない指定です。
ですから、横にスクロールが発生します。
【参考記事】white-spaceの使い方
overflowの指定の補足
overflow
は、
- overflow-x
- overflow-y
の一括指定です。
overflow: hidden scroll
とすれば、横方向にはみ出した時はhidden
、縦方向はscroll
の値が適用されます。
overflow: hidden
だと、横・縦方向ともにhidden
が適用になります。
overflow: hiddenの使いどころ
今度は、overflow: hidden
の使いどころです。
hidden
は、【画像を使いこなす③】hoverで画像を拡大という記事で使ってましたね。
<div>
<img src="mountain.png" alt="山">
</div>
div {
width: 400px;
height: 200px;
overflow: hidden;
}
img:hover {
transform: scale(1.3);
}

↑の画像にカーソルを乗せるか、スマホの人はタップしてみてください。
画像<img>の大きさとそれを囲む親<div>は幅・高さが同じです。
で、hover
した時に画像を拡大させています。
本来なら画像は<div>からはみ出ます。
しかし、overflow: hidden
としているためはみ出た部分は隠されているというわけです。
参考サイト
overflow
はCSS3をもとに書きました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
W3Cの方は英語で書かれてるのでね。
無理して読まなくて大丈夫ですよー
まとめ
overflowを使えるようになれば、どこでだってスクロールとかもさせれるようになります。
遊びながら試してみてください。
こんな感じで↓
ではまたぁぁぁ〜〜〜〜〜
※横にスクロールしてください。