overflow

スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。 横方向のみの指定は overflow-x、縦方向のみの指定は overflow-y で指定することができます。

デフォルト値 visible
適用対象 ブロックレベル要素、インラインブロック要素、テーブルのセル
継承 しない
バージョン CSS2
JavaScript object.style.overflow

書式

overflow: overflow

属性値

overflow
領域をはみ出した要素の扱いを以下の値の中から指定します。
意味
visible 領域をはみ出した部分も表示する。(規定値)
hidden 領域をはみ出した部分は表示しない。
scroll 領域をスクロール表示にする。領域をはみ出した部分が無くてもスクロールバーは表示される。
auto 領域をはみ出した部分があれば自動的にスクロール表示にする。領域をはみ出した部分がなければスクロールバーは表示しない。
inherit 上位の要素のoverflow属性値を継承する。

対応状況

Webブラウザ 対応状況
Chrome Supported
FireFox 3.0 Supported
Internet Explorer 6.0 Supported
Opera 9.62 Supported
Safari 3.2.1 Supported

使用例

スタイルシート属性 overflow の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<div style="overflow: visible; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。



<div style="overflow: hidden; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。
<div style="overflow: scroll; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。
<div style="overflow: scroll; width: 100px; height: 60px; border: 1px solid">overflow</div>
overflow
<div style="overflow: auto; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>

スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。

<div style="overflow: auto; width: 100px; height: 60px; border: 1px solid">overflow</div>

overflow

<div style="overflow: hidden">
  <div style="overflow: inherit; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。
<div style="overflow: auto">
  <div style="overflow: inherit; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。

overflow-x

スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い(横方向のみ)を指定します。

書式

overflow-x: overflow

属性値

overflow
領域をはみ出した要素の扱いを以下の値の中から指定します。
意味
visible 表示する(規定値)
hidden 表示しない
scroll スクロール表示
auto 自動
inherit 継承

対応状況

Webブラウザ 対応状況
Chrome Supported
FireFox 3.0 Supported
Internet Explorer 6.0 Supported
Opera 9.62 Supported
Safari 3.2.1 Supported

使用例

スタイルシート属性 overflow-x の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<pre style="overflow-x: visible; width: 100px; height: 40px; border: 1px solid">スタイルシート属性 overflow-x</pre>
スタイルシート属性 overflow-x
<pre style="overflow-x: hidden; width: 100px; height: 40px; border: 1px solid">スタイルシート属性 overflow-x</pre>
スタイルシート属性 overflow-x
<pre style="overflow-x: scroll; width: 100px; height: 40px; border: 1px solid">スタイルシート属性 overflow-x</pre>
スタイルシート属性 overflow-x
<pre style="overflow-x: auto; width: 100px; height: 40px; border: 1px solid">スタイルシート属性 overflow-x</pre>
スタイルシート属性 overflow-x 

overflow-y

スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。

書式

overflow-y: overflow

属性値

overflow
領域をはみ出した要素の扱いを以下の値の中から指定します。
意味
visible 表示する(規定値)
hidden 表示しない
scroll スクロール表示
auto 自動
inherit 継承

対応状況

Webブラウザ 対応状況
Chrome Supported
FireFox 3.0 Supported
Internet Explorer 6.0 Supported
Opera 9.62 Supported
Safari 3.2.1 Supported

スタイルシート属性 overflow-y の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<div style="overflow-y: visible; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。</div>
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。




<div style="overflow-y: hidden; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。</div>
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。
<div style="overflow-y: scroll; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。</div>
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。
<div style="overflow-y: auto; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。</div>
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い(縦方向のみ)を指定します。