overflow

Updated 2013.11.06 / Published 2007.02.02

overflowプロパティはブロックボックスの内容が指定された横幅・高さの領域からはみ出した場合の表示方法を指定します。

widthプロパティ、heightプロパティにより内容領域を指定されたブロックボックスが、指定されたサイズよりも内容が大きなサイズをもつ場合などが対象となります。なおCSS3では、置換されないブロックボックスを形成する要素と置換されないインラインブロックボックスを形成する要素に変更されていることから、インラインブロックボックスを形成する要素に対しても有効です。

値

visible
hidden
scroll
auto
inherit

初期値

visible

適用対象

ブロックボックスを形成する要素(CSS3では、置換されないブロックボックスを形成する要素と置換されないインラインブロックボックスを形成する要素に変更)

継承

しない

メディア

visual

overflowプロパティの値

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

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

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

overflowプロパティの実装状況

IE: ◯：IE6 は "visible" の場合、内容領域からはみ出した分、勝手にボックスの高さを拡張する
Firefox: ◯
Opera: ◯
Chrome: ◯
Safari: ◯
iOS: ◯
Android: ◯

Internet Explorer 6 は "visible" が指定された場合（"visible" が初期値のため、overflowプロパティ自体の指定がなくても）、指定された幅や高さの内容領域からはみ出すと、通常はあふれて表示するはずが、勝手に高さを広げて、その内容が収まりきるようにボックスを拡張してしまいます。このためheightプロパティで高さを指定している場合、min-heightプロパティをサポートしていないIE6でも結果的にmin-heightプロパティと同様の振る舞いをすることになります。

サンプル

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

"hidden" は、はみ出した内容を切り取ってしまうので、同時にその部分にあった情報にユーザはアクセスすることができなくなってしまいます。このためアクセシビリティの点から、"hidden" は情報の種類に注意して使用する必要があります。たとえば、目の悪いユーザはフォントサイズのみを極端に大きくして閲覧していることが考えられ、そのような場合にoverflow : hidden ;が使われていると内容の大半がはみだして隠れてしまって、ほとんどの情報を読み取ることができなくなってしまいます。