ウェブランサー

overflow - 要素からはみ出した内容の表示方法を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 ブロックレベル要素
継承 しない

overflowプロパティは、主にブロックレベル要素の内容物が入りきらない場合に、はみ出した部分をどのように表示するかを指定する際に使用します。

InternetExplorer独自の仕様として[overflow-x]で横方向のみ、[overflow-y]で縦方向のみの指定ができますが非推奨です。また、Mac版InternetExplorerには結構致命的なバグがあるそうなので、大事な部分で使用する場合は、各ブラウザでチェックした方が良さそうです。

overflowに与えられる値

overflow: visible;
ボックスからはみ出して表示されます。これが初期値です。IEでは、ボックスの方が内容に合わせて拡張してしまいます。
overflow: scroll;
ボックスにスクロールバーが表示されます。内容が入りきらない場合は、スクロールして見られるようになります。
overflow: hidden;
はみ出した部分は表示されません。
overflow: auto;
ブラウザが自動的に判断します。殆どの場合、内容が入りきらない場合は、スクロールして見られるようになります。

overflowの使用サンプル

CSS
.text_sample01 {
 overflow: visible;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
 margin-bottom: 20px;
}
.text_sample02 {
 overflow: scroll;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
 margin-bottom: 20px;
}
.text_sample03 {
 overflow: hidden;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
 margin-bottom: 20px;
}
.text_sample04 {
 overflow: auto;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
}
XHTML
<div class="text_sample01">
text_sample01 [overflow: visible;]<br />
【1】テキストサンプル・・・(略)<br />
</div>

<div class="text_sample02">
text_sample02 [overflow: scroll;]<br />
【1】テキストサンプル・・・(略)<br />
</div>

<div class="text_sample03">
text_sample03 [overflow: hidden;]<br />
【1】テキストサンプル・・・(略)<br />
</div>

<div class="text_sample04">
text_sample04 [overflow: auto;]<br />
【1】テキストサンプル・・・(略)<br />
</div>
表示確認
text_sample01 [overflow: visible;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル
text_sample01 [overflow: scroll;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル
text_sample01 [overflow: hidden;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル
text_sample01 [overflow: auto;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル

overflowに関連するCSSプロパティ

要素の表示や配置方法
alignment-adjust 要素の水平位置を揃える基準を指定する
alignment-baseline 要素の水平位置を揃える際に親要素との相対関係に基いて指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
clear 要素の回り込み(float)を解除する
clip 要素の回り込み(float)を解除する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left positionに従って要素を配置する際に、左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-style 要素からはみ出した内容の表示スタイルを指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right positionに従って要素を配置する際に、右辺からの距離を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する
zoom 要素の表示倍率(拡大・縮小)を指定する