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

目次

overflow

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

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

書式

overflow: overflow

属性値

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

overflowの使用例

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

overflowにvisibleを指定すると、領域をはみ出した部分も表示される。

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

overflowにhiddenを指定すると、領域をはみ出した部分は表示されない。

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

overflowにscrollを指定すると、スクロールバーが表示される。

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

overflowにscrollを指定すると、領域をはみ出さなくてもスクロールバーが表示される。

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

overflowにautoを指定すると、領域をはみ出す場合にスクロールバーが表示される。

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

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

overflowにautoを指定すると、領域をはみ出さない場合はスクロールバーが表示されない。

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

overflow

overflowにinheritを指定すると、親要素のoverflowが継承される。

親要素のoverflowがhiddenであれば、それが継承される。

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

親要素のoverflowがautoであれば、それが継承される。

<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 継承

使用例

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

overflow-xにvisibleを指定すると、領域をはみ出した部分も表示される。

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

overflow-xにhiddenを指定すると、領域をはみ出した部分は表示されない。

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

overflow-xにscrollを指定すると、スクロールバーが表示される。

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

overflow-xにautoを指定すると、領域をはみ出す場合にスクロールバーが表示される。

<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 継承

overflow-yの使用例

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

overflow-yにvisibleを指定すると、領域をはみ出した部分も表示される。

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

overflow-yにhiddenを指定すると、領域をはみ出した部分は表示されない。

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

overflow-yにscrollを指定すると、スクロールバーが表示される。

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

overflowにautoを指定すると、領域をはみ出す場合にスクロールバーが表示される。

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

このエントリーをはてなブックマークに追加