【css】overflowの使い方

今回は、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としているためはみ出た部分は隠されているというわけです。

参考サイト

overflowCSS3をもとに書きました。

CSS3とは、cssのルールブックみたいなもので、その最新版です。

W3Cの方は英語で書かれてるのでね。

無理して読まなくて大丈夫ですよー

まとめ

overflowを使えるようになれば、どこでだってスクロールとかもさせれるようになります。

遊びながら試してみてください。

こんな感じで↓

ではまたぁぁぁ〜〜〜〜〜

※横にスクロールしてください。

タイトルとURLをコピーしました