CSS overflow 属性

定義と使用法

overflow 内容が要素の枠を超えた場合に発生するアクションを定義します。

説明

この属性は、オーバーフローした要素の内容がどのように処理されるかを定義します。値が scroll であれば、ユーザーエージェントは常にスクロールメカニズムを提供します。したがって、要素の枠内にすべての内容が収まってもスクロールバーが表示されることがあります。

も参照してください：

CSS チュートリアル：CSS 位置

HTML DOM リファレンスマニュアル：overflow 属性

例

overflow 属性の設定：

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

実際に試してみる

CSS 文法

overflow: visible|hidden|clip|scroll|auto|initial|inherit;

属性値

値 説明
visible デフォルト値。内容は切り取られず、要素の枠外に表示されます。
hidden 内容は切り取られ、残りの内容は見えません。
scroll 内容は切り取られるが、ブラウザは残りの内容を確認するためにスクロールバーを表示します。
auto 内容が切り取られる場合、ブラウザは残りの内容を確認するためにスクロールバーを表示します。
inherit 親要素から overflow 属性の値を継承するべきことを指定します。

技術的詳細

デフォルト値： visible
継承性： no
バージョン： CSS2
JavaScript 文法： object.style.overflow="scroll"

他の例

スクロールバーを使用して要素内のオーバーフローした内容を表示する方法
この例では、要素内容が指定されたエリアを超えた場合、どうやってオーバーフロー属性を設定して対応するアクションを定義するかを示しています。
オーバーフローした要素内の内容を隠す方法
この例では、要素内の内容が指定されたエリアに適さない大きさの場合、どうやって overflow 属性を設定して内容を隠すかを示しています。
ブラウザがオーバーフローを自動的に処理するように設定する方法
この例では、ブラウザがオーバーフローを自動的に処理するように設定する方法を示しています。

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0