overflow｜プロパティ｜CSS HappyLife ZERO

overflow

最終更新：2009年11月27日 19:41

overflowプロパティは、ボックスから内容がはみ出た部分の表示方法を指定できます。
iframe要素やtextarea要素のようなスクロール機能を付けたり、他にも色々使って行けるプロパティです。

通常、ボックスの内容辺により範囲を制限されるため、ボックスからはみ出す事は有りませんが、以下のような場合に内容がはみ出す事が有ります。

pre要素やwhite-space: nowrap;等で改行できず、ボックスの横幅より大きくなった場合
子孫要素のwidthの値が大き過ぎてボックスからはみ出す場合
heightプロパティの指定が有り、内容量がheightプロパティの値より多くなりはみ出る場合
子孫要素が絶対配置（positionプロパティの値がabsoluteかfixed）され部分的にはみ出る場合
子孫要素にネガティブマージンの指定が有りはみ出る場合
text-indentプロパティの指定によってはみ出る場合

こんな感じの状況で、ボックスからはみ出た場合の処理をするのがoverflowプロパティです。

対応ブラウザ

プロパティの解説

値: visible｜hidden｜scroll｜auto｜inherit
初期値: visible
適用される要素: 非置換のブロックレベル要素、テーブルのセル、inline-block要素
（CSS3では、テーブルのセルは消えてるっぽいです）
継承: しません
パーセント値: N/A
メディア: visual

値の解説

visible: 内容を切り抜きません。ボックスからはみ出た場合そのまま表示されます。
尚、IE6はwidthプロパティやheightプロパティの指定を無視してボックスが勝手に広がってしまいます。
hidden: 内容を切り抜きます。その為、内容はボックス内にしか表示されず、はみ出た部分は見る事が出来ません。また、UA（ブラウザなど）はスクロール機能を提供しません。
scroll: 内容を切り抜くため内容はボックス内にしか表示されませんが、hiddenとは違いUAはスクロール機能を提供します。これは内容量に関わらずスクロール機能が提供されます。また、印刷時にはみ出た部分も出力されます。
auto: UA依存になりますが、内容がはみ出した場合は自動的にスクロール機能が提供されます。

overflowの基本的なサンプル

.section {
  margin: 20px;
}

.section .item {
  width: 300px;
  height: 120px;
  margin: 0 0 50px;
  padding: 10px;
  background: #f9f9ff;
  border: 1px solid #999;
}

.section .visibleArea {
  overflow: visible;
}

.section .hiddenArea {
  overflow: hidden;
}

.section .scrollArea {
  overflow: scroll;
}

.section .autoArea {
  overflow: auto;
}

<div class="section">

<div class="item visibleArea">
...（略）...
</div>

<div class="item hiddenArea">
...（略）...
</div>

<div class="item scrollArea">
...（略）...
</div>

<div class="item autoArea">
...（略）...
</div>

<!-- / .section --></div>

まずは、それぞれの値を試した基本的なサンプルです。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

著書（全て共著）

Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。
XHTML+CSS プロが教える"本当の使い方"

著書（全て共著）

Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。
XHTML+CSS プロが教える"本当の使い方"

著書（全て共著）

Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。
XHTML+CSS プロが教える"本当の使い方"

著書（全て共著）

Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。
XHTML+CSS プロが教える"本当の使い方"

一番最後のようにautoを指定すると、UAが自動的にスクロール機能を付けてくれるので、高さを決め打ちしたいデザインで使って行けます。

基本的な使い方は上記のような感じですが、他にも色んな使い方ができるのでいくつか紹介します。

overflowで最初のボーダーを消したサンプル

ul.borderSample {
  _zoom: 1; /* for IE6 */
  overflow: hidden;
  margin: 20px;
  list-style: none;
}

ul.borderSample li {
  _zoom: 1; /* for IE6 */
  margin: 0;
  margin-top: -1px;
  padding: 5px;
  border-top: 1px solid #999;
}

<ul class="borderSample">
<li>...（略）...</li>
<li>...（略）...</li>
<li>...（略）...</li>
</ul>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。
XHTML+CSS プロが教える"本当の使い方"

通常、最初のボーダーだけ消したい場合、:first-child疑似クラスを使えば問題ありませんが、IE6が対応していないため、JSを使わずにやるにはこの方法が良いかなと思います。
これからの時代、IE6の為にそこまでする必要が無かったりするので使う機会は減るかもしれませんが覚えておいて損は無いかなと思います。

overflowをcleafixのように使ったサンプル

.overflowSample {
  overflow: hidden;
  width: 400px;
  margin: 20px 20px 30px;
  background: #f1f1f1;
}

.overflowNoneSample .photo,
.overflowSample .photo {
  float: left;
  margin-right: 10px;
}

.overflowNoneSample {
  width: 400px;
  margin: 20px 20px 30px;
  background: #f1f1f1;
}

<div class="overflowSample">
<p class="photo"><img src="/img/item/ponta.jpg" alt="写真：ぽんた" /></p>
<p>...（略）...</p>
</div>

<div class="overflowNoneSample">
<p class="photo"><img src="/img/item/ponta.jpg" alt="写真：ぽんた" /></p>
<p>...（略）...</p>
</div>

二つの違いは、overflow: hidden;の宣言の有無です。これによって、clearfixのように子孫要素にフロートボックスが有っても高さを確保できます。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示: この写真は、あらいぐまのぬいぐるみです。名前がぽんたでも、あらいぐまのぬいぐるみなんです。

この写真は、あらいぐまのぬいぐるみです。名前がぽんたでも、あらいぐまのぬいぐるみなんです。

一つ目のサンプルは背景色がimg要素の高さ + p要素のmargin-bottomに合わせて広がっているのが確認できます。
尚、IE6, 7だとwidthプロパティの指定が有るため、hasLayoutの値がtrueになり、overflow: hidden;の宣言の有無に関わらず高さが確保されてしまうので、別のブラウザでご確認ください。

overflowプロパティは、はみ出した部分の指定をするはずなのに、高さが確保されるのはかなり違和感が有るかもしれませんが、これに関しては仕様書に「overflowプロパティの値がvisible以外で、通常フローの非置換ブロックレベル要素は、heightプロパティの値がauto（初期値）の場合、子孫要素の高さに依存する」みたいな事が書かれています。なので、clearプロパティみたいにクリアランスがどーのってのとは違う感じですが、高さを確保するのに使って行けます。
尚、IE5.xなど古いブラウザが対象に入っている場合、中身が全く表示されなくなったりと言った問題も生じるので対象ブラウザにご注意ください。

参考

関連性が深いページ

inherit値【CSSの基本】
float【プロパティ】
clip【プロパティ】

関連・参考サイト