今回は、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を使えるようになれば、どこでだってスクロールとかもさせれるようになります。
遊びながら試してみてください。
こんな感じで↓
ではまたぁぁぁ〜〜〜〜〜
※横にスクロールしてください。