【CSS入門】overflowで、はみ出し部分の表示を指定

この記事ではCSSのoverflowプロパティについて解説します。

overflowとは？

ボックスからはみ出た部分の表示の仕方を指定します。

overflowの使い方

overflowに指定できる値は以下の通りです。

overflow: visible;

overflowの初期値がこれです。

ボックスからはみ出した部分は、そのまま表示されます。

HTML

<div class="box">
  サンプルテキスト。サンプルテキスト。サンプルテキスト。
</div>

CSS

.box{
    width: 100px;
    height: 100px;
    background: orange;
    overflow: visible;
}

ただしheightを指定しなければvisibleを指定していても、はみ出さなくなります。

CSS

.box{
    width: 100px;
    background: orange;
    overflow: visible;
}

overflow: hidden;

overflowプロパティで一番よく使う値です。

ボックスからはみ出した部分は、表示されなくなります。

CSS

.box{
    width: 100px;
    height: 100px;
    background: orange;
    overflow: hidden;
}

こちらもvisible同様、heightを指定しなければはみ出さなくなります。

テキストの回り込み回避

hiddenは、テキストの回り込み回避に使われる事もあります。

例えば画像を左側に、テキストを右側に配置したい場合、画像にfloat: left;をするだけだと下記のように画像の下にテキストが回り込んで表示されます。

HTML

<div class="box">
  <img src="sample.jpg">
  <p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

CSS

.box{
  width: 300px;
  height: 300px;
  background: orange;
}

.box img{
  float: left;
}

テキストの方にoverflow: hidden;を指定するだけで、この回り込みを回避することができます。

CSS

.box p{
  overflow: hidden;
}

overflow: scroll;

ボックスからはみ出した部分は、スクロールで表示されます。

ブラウザによってスクロールバーの表示が異なります。こちらもvisible同様、heightを指定しなければはみ出さなくなります。

CSS

.box{
    width: 100px;
    height: 100px;
    background: orange;
    overflow: scroll;
}

overflow: auto;

ボックスからはみ出した部分の表示方法は、ブラウザに依存します。

しかし基本的にはscrollと同じようにスクロールで表示されます。こちらもvisible同様、heightを指定しなければはみ出さなくなります。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の2点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。