コーディングするときによく使うoverflow。 お仕事でもちょっとつまづいたので、今回は改めていろいろと便利なverflowの使い方をまとめました。

overflowとは

overflowはボックスからはみ出したコンテンツをどう表示するかを指定するものです。

  • visible:初期値 ボックスからはみ出した状態で表示します。
  • hidden:ボックスからはみ出した部分は表示させません。
  • scroll:ボックス内をスクロール出来るようになります。
  • auto:ブラウザに依存(一般的にはスクロールしてみれるようになる)

1.はみ出した要素を隠す。

例えばウインドウサイズよりも大きいボックスがある場合。そのまま表示すると横のスクロールバーが表示されます。 横スクロールバーを表示させたくない場合はボックスを囲んでいるボックスに対して以下のように書きます。 html


<div class="wrap">
    <div class="box">
    </div>
</div>

css

.wrap{
    width:100%;
    overflow: hidden;
    position:relative;
}

こうするとウインドウサイズより外の物は表示されなくなります。 ここでなぜposition:relativeがついているかというとIEでは、中身にposition:relativeが指定されていると、hiddenがちゃんと動作しないというバグがあるようです。なので中身にposition:relativeがついている場合はhiddenをかけた親要素にもrelativeを忘れずに。

2.テキスト回り込みの回避に使う。


<div class="wrap">
    <img src="hoge.jpg">
    <p>テキストテキスト</p>
</div>

css

.wrap img{
    float: left;
}

.wrap p{
    overflow: hidden;
}

テキストのほうにoverflowを指定してあげるだけで回り込みを回避出来ます。

3.clearfixの代わりに使う。


<div class="wrap">
    <div class="box">
    </div>
</div>

css

.wrap{
    overflow: hidden;
}

外側にoverflow:hiddenでclearfixと同じ効果があります。