CSS overflow

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

overflow

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

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

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

使い方

overflow: overflow

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

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

初期値

overflow プロパティの初期値は visible である。

overflow: visible

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

<div style="overflow: visible; width: 200px; height: 60px; border: 1px solid">
  ゆく河の流れは絶えずして、しかももとの水にあらず。
  淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。
</div>
ゆく河の流れは絶えずして、しかももとの水にあらず。 淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。

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

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

<div style="overflow: visible; border: 1px solid">
  ゆく河の流れは絶えずして、しかももとの水にあらず。
  淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。
</div>
ゆく河の流れは絶えずして、しかももとの水にあらず。 淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。

overflow: hidden

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

<div style="overflow: hidden; width: 200px; height: 60px; border: 1px solid">
  ゆく河の流れは絶えずして、しかももとの水にあらず。
  淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。
</div>
ゆく河の流れは絶えずして、しかももとの水にあらず。 淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。

overflow: scroll

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

<div style="overflow: scroll; width: 200px; height: 60px; border: 1px solid">
  ゆく河の流れは絶えずして、しかももとの水にあらず。
  淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。
</div>
ゆく河の流れは絶えずして、しかももとの水にあらず。 淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。

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: 200px; height: 60px; border: 1px solid">
  ゆく河の流れは絶えずして、しかももとの水にあらず。
  淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。
</div>

ゆく河の流れは絶えずして、しかももとの水にあらず。 淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。

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';

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">
Marley was dead: to begin with.
There is no doubt whatever abount that.
</pre>
Marley was dead: to begin with.
There is no doubt whatever abount that.

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 

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

CSSプロパティ

CSSには次のプロパティがある。

参考文献

World Wide Web Consortium (2021) CSS Box Model Module Level 3