overflow

概要

CSS の overflow プロパティは、要素のボックスからはみ出たコンテンツを、そのまま表示するのか、クリップするのか、スクロールバーをつけて表示するのかを指定します。

overflow プロパティをデフォルト値 visible 以外の値にすると、新たなブロック整形文脈を作ります。これは技術的に妥当なもので、仮にスクロール可能な要素内にフロートが割り込めると、周囲のコンテンツの折り返し処理がやり直されるので、これではスクロールバーが動かされるたびに折り返し処理が発生し、スクロールが非常に遅くなるでしょう。注意点として、プログラムからこのプロパティに関係する HTML 要素の scrollTop を設定すると、overflowhidden 値だったとしても、要素がスクロールするかもしれません。

  • 初期値 visible
  • 適用対象 非置換ブロックレベル要素と非置換インラインブロック要素
  • 継承 継承しない
  • メディア visual
  • 計算値 指定値
  • アニメーションの可否 不可
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

形式文法: 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-horizontal
overflow-xoverflow-y の使用が好ましいです。
-moz-scrollbars-vertical
overflow-xoverflow-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; /* スクロールバーは与えられません */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

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 Editor's Draft 変更無し
CSS Level 2 (Revision 1) 勧告  

ブラウザ実装状況

機能 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 のように振る舞います。

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す