[CSS] overflowの使い方

投稿日：2019年11月3日

どうも、べ〜やんです。

今回はCSSのoverflowの使い方を紹介します。

テキストが長いけどスペースを大きく取りたくない場合などに便利です。

overflowとは

overflowは要素からはみ出たテキストをどうするのかを指定するプロパティです。

値は４つ

値は以下の4つです。

overflow: visible;　　/* デフォルト、はみ出す */
overflow: hidden;    /* はみ出た部分を非表示 */
overflow: scroll;　　/* はみ出た部分を隠し＋スクロール */
overflow: auto;　　　/* 各ブラウザの設定に従う */

visible

overflow: visible;はデフォルトの設定ではみ出す部分を、そのままはみ出た状態で表示します。

要素に高さを設定していない場合は、要素の大きさがテキストに合わせて変化するのではみ出ません。

See the Pen wvvpYPp by beeyan (@orientado) on CodePen.

hidden

overflow: hidden;ではみ出た部分を非表示にして隠します。

See the Pen oNNpapb by beeyan (@orientado) on CodePen.

scroll

overflow: scroll;ではみ出た部分を非表示にして隠し、隠れた部分をスクロールで確認できるようにします。

See the Pen mddpzxm by beeyan (@orientado) on CodePen.

横スクロール

横スクロールにしたい場合は、white-space:nowrapも指定します。

See the Pen PooEyeJ by beeyan (@orientado) on CodePen.

x軸とy軸のスクロールを別々に指定する事もできます。

IEでは常にスクロールバーが右側と下側に表示されます。

例えば横にスクロールできなくてもスクロールバーだけは表示されてしまいます。これを防ぐためにy軸をスクロール指定＋x軸を非表示指定にして不要なスクロールバーを非表示にできます。

See the Pen NWWXOBz by beeyan (@orientado) on CodePen.

auto

overflow: auto;ははみ出た部分をどうするかを各ブラウザの設定に従います。ほとんどの場合にスクロール表示になるようです。

See the Pen WNNdaaK by beeyan (@orientado) on CodePen.

おわりに

今回はCSSのoverflowの使い方を紹介しました。

ブラウザによって差異があるので注意してください。特にIEではスクロールバーが常に表示されたりデザイン性やサイトの雰囲気に大きく影響します。