CSS リファレンスマニュアル

CSS @ルール(RULES)

CSS 属性完全ガイド

CSS3 overflow-属性の使用方法と例

overflow-要素の内容エリアの上端と下端のエッジに内容がオーバーフローした場合、内容を切り取る、スクロールバーを表示するか、オーバーフローした内容を表示するかを指定するCSS属性です。

以下のテーブルはこの属性の使用法とバージョン履歴、およびjavascriptスクリプト内での使用構文を示しています。

デフォルト値：	visible
適用：	Block, inline-block と flex コンテナ
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript 構文：	object.style.overflowY="scroll"

y-構文の使用

この属性の構文は以下の通りです：

overflow-y:　visible　|　hidden　|　scroll　|　auto　|　initial　|　inherit

以下の例では、overflow-y属性。

例

　　div　{
　　　width:　400px;
　　　height:　300px;
　　　overflow-x:　scroll;
　　}

テストしてみる‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
visible	内容はカットアウトされません；フレームの外にレンダリングされ、他の内容と重なる可能性があります。これはデフォルトの値です。
hidden	オーバーフローした要素のフレーム内の内容はカットアウトされ、残りの内容は見えません。
scroll	オーバーフローした内容は隠れてカットアウトされますが、スクロールメカニズムが提供され、オーバーフローした内容にアクセスできます。
auto	内容が要素のフレームを超えた場合、スクロールバーが提供され、残りの内容を確認できます。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のoverflow-yの属性値。

ブラウザ互換性

overflow-y属性のブラウザの互換性について、以下のテーブルにはその属性をサポートするブラウザの最低バージョン番号が示されています；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 1。5上記 Google Chrome1+ Internet Explorer 9+ Apple Safari 3+ Opera 9。5+

警告： Internet Explorer 7およびそれ以前のバージョンでは、このoverflow-y属性が必要です。IE8この属性をサポートしていますが、Microsoft特有の-ms-プレフィックス（例えば-ms-overflow-y）。IE9およびそれ以降のバージョンでサポートされています。

さらに詳しく

以下のチュートリアルを参照してください：CSS Overflow。

関連属性：overflow、overflow-x、clip、word-wrap。

CSS padding 属性 CSS3 overflow-x 属性