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

overflow

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

overflow
項目内容
初期値visible
継承しない
属性値visible | hidden | scroll | auto | inherit

横方向のみの指定は overflow-x、縦方向のみの指定は overflow-yで指定することができます。

overflow: overflow

overflowには、領域をはみ出した要素の扱いを以下の値の中から指定します。

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

overflow: visible

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

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

上記の例ではwidthとheightでサイズを指定しているので、このサイズをはみだした部分の表示方法をoverflowで指定している。

サイズを指定していない場合は、コンテンツに応じてdiv領域が自動的に適切なサイズになるため、overflowを指定しても意味がない。

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

overflow: hidden

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

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

overflow: scroll

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

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に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 は、領域をはみ出した要素の扱いを指定します。

JavaScript

JavaScriptでoverflow CSSプロパティを参照したり設定するには、elementオブジェクトのstyleプロパティを使う。

var e = document.getElementById('example');
e.style.overflow = 'hidden';

リクナビNEXT

overflow-x

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

書式

overflow-x: overflow

属性値

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

overflow-x: visible

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

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

overflow-x: hidden

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

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

overflow-x: scroll

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

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

overflow-x: auto

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

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

リクナビNEXT

overflow-y

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

書式

overflow-y: overflow

属性値

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

overflow-y: visible

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

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

overflow-y: hidden

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

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

overflow-y: scroll

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

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

overflow-y: auto

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

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