Go to information

overflow

overflowプロパティはブロック要素の内容が指定された横幅・高さの領域からはみ出した場合の表示方法を指定します。widthプロパティ、heightプロパティにより内容領域を指定されたブロック要素が、指定されたサイズよりも内容が大きなサイズをもつ場合などが対象となります。

値
初期値
visible
適用対象
ブロック要素
継承
しない
メディア
visual

overflowプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

visible
はみ出した内容を指定された幅や高さの内容領域からあふれて表示する
hidden
内容領域を超えるものは切り取られ、スクロールバーをつけない
scroll
内容領域を超える・超えないにかかわらず、常にスクロールバーをつける
auto
UA のレンダリングに依存、内容領域を超える場合はスクロールバーをつける

適用対象は、ブロック要素ですが、現実的な対象は、ブロック要素の中でも div要素のみに制限しておいた方が無難です。Macintosh版Internet Explorer 5 においては、div要素以外のブロック要素に overflowプロパティを指定すると、その要素の表示が消えてしまうという問題のバグを抱えた実装となっているためです。また、Windows版Internet Explorer 6 においては "visible" が指定された場合（"visible" が初期値のため、overflowプロパティ自体の指定がなくても）、指定された幅や高さの内容領域からはみ出すと、通常はあふれて表示するはずすが、勝手に幅や高さを広げて、その内容が収まりきるようにボックスを拡張してしまいます。

CSS2 の仕様では、clipプロパティの適用対象が置換要素の中で、overflowプロパティに "visible" 以外の値を持つ要素となっていましたが、改訂版の CSS2.1 の仕様より、clipプロパティの適用対象は、絶対配置（position : absolute ;）の要素のみに変更されたため、CSS2 の仕様で overflowプロパティの適用対象となっていた置換要素は適用対象より除外されることになりました。

overflowプロパティの実装状況

Windows版Internet Explorer
○（Windows版Internet Explorer 6 は "visible" の場合、内容領域からはみ出した分、勝手にボックスを拡張する）
Firefox
○
Opera
○
Safari
○
Macintosh版Internet Explorer 5
div要素以外の要素に指定すると、当該要素は消えて表示されない（実質的に div要素以外機能しない）

サンプル

記述例
div      { height : 150px ; width : 200px ; border : 1px solid gray ; }
.visible { overflow : visible ; }
.hidden  { overflow : hidden ; }
.scroll  { overflow : scroll ; }
.auto    { overflow : hidden ; }
表示例

"hidden" は、はみ出した内容を切り取ってしまうので、同時にその部分にあった情報にユーザーはアクセスすることができなくなってしまいます。このためアクセシビリティの点から、"hidden" は情報の種類に注意して使用してください。

現在位置
  1. W3G
  2. CSS
  3. 表示と配置
  4. overflow
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:41:55+09:00
更新
2008-12-29T04:30:38+09:00
URI
http://w3g.jp/css/display_position/overflow
検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!