CSS overflow

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

overflow

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

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

使い方

overflow: overflow

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: 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がautoであれば、それが継承される。

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

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: hidden

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

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

overflow-y: scroll

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

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

overflow-y: auto

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

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

CSSプロパティ

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

参考文献

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