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

CSS@ルール(RULES)

CSS属性全書

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

overflow-要素の内容領域の左右端に内容が溢れた場合、内容を切り取る、スクロールバーを表示する、または溢れた内容を表示するかどうかを指定するCSS属性です。

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

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

overflow xの使用構文

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

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

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

例

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

テストを試してみる‹/›

属性値

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

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

ブラウザの互換性

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

	Firefox 1.5上記 Google Chrome1+ Internet Explorer 9+ Apple Safari 3+ Opera 9.5+

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

さらに詳しく

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

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

CSS3 overflow-y 属性 CSS overflow 属性