概要
CSS の overflow プロパティは、要素のボックスからはみ出たコンテンツを、そのまま表示するのか、クリップするのか、スクロールバーをつけて表示するのかを指定します。
overflow プロパティをデフォルト値 visible 以外の値にすると、新たなブロック整形文脈を作ります。これは技術的に妥当なもので、仮にスクロール可能な要素内にフロートが割り込めると、周囲のコンテンツの折り返し処理がやり直されるので、これではスクロールバーが動かされるたびに折り返し処理が発生し、スクロールが非常に遅くなるでしょう。注意点として、プログラムからこのプロパティに関係する HTML 要素の scrollTop を設定すると、overflow が hidden 値だったとしても、要素がスクロールするかもしれません。
構文
形式文法: visible | hidden | scroll | auto
overflow: visible overflow: hidden overflow: scroll overflow: auto overflow: inherit
値
visible- デフォルトの値です。コンテンツはクリップされず、コンテンツのボックスより外側に描画されるかもしれません。
hidden- コンテンツはクリップされ、クリップ領域外の（見えなくなった）コンテンツを見るためのスクロールバーは作られません。
scroll- コンテンツはクリップされ、デスクトップブラウザではコンテンツがクリップされたかどうかに関わらず、スクロールバーを描画します。これは、動的な環境でスクロールバーが表示されたり消されたりして起きる問題を防ぎます。プリンターははみ出たコンテンツを印刷するかもしれません。
auto- ユーザエージェントに依存する動作です。Firefox のようなデスクトップブラウザでは、コンテンツがはみ出るならスクロールバーを作ります。
Mozilla 拡張
-moz-scrollbars-none- 代わりに
overflow:hiddenを使ってください。 -moz-scrollbars-horizontaloverflow-xとoverflow-yの使用が好ましいです。-moz-scrollbars-verticaloverflow-xとoverflow-yの使用が好ましいです。- -moz-hidden-unscrollable
- 内部使用、テーマ向けです。XML のルート要素と
<html>、<body>が、矢印キーとマウスホイールでスクロールすることを禁止します。
例
p {
width: 12em;
height: 8em;
border: dotted;
overflow: visible; /* クリップしません */
}
visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: hidden; /* スクロールバーは与えられません */ }
p { overflow: scroll; /* 常にスクロールバーを表示します */ }
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* 必要ならスクロールバーを付加します */ }
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
仕様書
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Basic Box Model The definition of 'overflow' in that specification. |
Editor's Draft | 変更無し |
| CSS Level 2 (Revision 1) The definition of 'overflow' in that specification. |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 (85) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | 1.0 (1) | ? | ? | ? |
Firefox (Gecko) に関する注記
Firefox 3.6 (Gecko 1.9.2) では、overflow プロパティが table-group 要素（<thead>、<tbody>、<tfoot>）に不正確に適用されています。この挙動は後のバージョンで直されています。
Internet Explorer に関する注記
Internet Explorer 4 から 6 では、overflow:visible（デフォルト値）を指定された要素を大きくしてコンテンツがおさまるようにします。height/width は min-height/min-width のように振る舞います。
関連情報
overflow関連 CSS プロパティ:text-overflow、white-space、overflow-x、overflow-y、clip、display