Webサイト制作におけるoverflow:hiddenの効果

Webサイト制作において、overflow:hidden;が登場する機会は比較的多いような気がする。floatを指定したものの親要素に指定すると習ったが、そういえば実際にその効果を検証したことはなかったと思い、今更ではあるが検証(確認)しておく。

1.1つのブロック要素の指定領域より中身が大きい場合
以下、コード。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>overflow:hiddenの検証</title>
<style>
body, div, p {
 margin: 0;
 padding: 0;
}
p {
 width: 60px;
 height: 30px;
 background: #0f0; /* 緑 */
}
</style>
</head>
<body>
<div>
<p>あかさたなはまやらわアカサタナハマヤラワ</p>
</div>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
普通にはみ出て表示されていることが分かる。

2.overflow:hiddenを指定
以下、コード変更点。

p {
 width: 60px;
 height: 30px;
 background: #0f0; /* 緑 */
  overflow: hidden;
}

以下、表示結果。
←クリックで拡大表示
指定した幅と高さ分のみが表示される。

3.親要素と子要素がある場合
以下、コード。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>overflow:hiddenの検証</title>
<style>
body, div, p {
 margin: 0;
 padding: 0;
}
div.wrapper {
 width:200px;
 height: 50px;
 background: #ccc; /* グレー */
}
p {
 width: 60px;
 height: 30px;
 background: #0f0; /* 緑 */
}
</style>
</head>
<body>
<div class="wrapper">
<p>あかさたなはまやらわアカサタナハマヤラワ</p>
</div><!-- .wrapper end -->
</body>
</html>

以下、表示結果。
←クリックで拡大表示
親要素からも子要素からもはみ出て表示されていることが分かる。

4.親要素のみにoverflow:hiddenを指定
以下、コード変更点。

div.wrapper {
 width:200px;
 height: 50px;
 background: #ccc; /* グレー */
 overflow: hidden;
}

以下、表示結果。
←クリックで拡大表示
親要素の指定領域内のみが表示される。

5.子要素(自身)のみにoverflow:hiddenを指定
以下、コード変更点。

div.wrapper {
 width:200px;
 height: 50px;
 background: #ccc; /* グレー */
}
p {
 width: 60px;
 height: 30px;
 background: #0f0; /* 緑 */
  overflow: hidden;
}

以下、表示結果。
←クリックで拡大表示
子要素の指定領域内のみが表示される。
親要素と子要素の両方にoverflow:hiddenを指定した場合も、同様の表示結果となる。

6.子要素にfloatを指定
子要素の高さを親要素の高さより大きくして検証。
以下、コード(CSS部)

div.wrapper {
 width:200px;
 height: 30px;
 background: #ccc; /* グレー */
}
p {
 float: left;
 width: 60px;
 height: 50px;
 background: #0f0; /* 緑 */
}

以下、表示結果。
←クリックで拡大表示
親要素の指定領域に関係なく、子要素が表示されていることが分かる。
また、親要素は自身の指定高さのままであることが分かる。

7.子要素にfloatを指定したまま子要素のみにoverflow:hiddenを指定
以下、コード変更点。

p {
 float: left;
 width: 60px;
 height: 50px;
 background: #0f0; /* 緑 */
 overflow:hidden;
}

以下、表示結果。
←クリックで拡大表示
子要素の指定領域内が表示され、親要素は自身の指定高さのままであることが分かる。

8.子要素にfloatを指定したまま親要素のみにoverflow:hiddenを指定
以下、コード変更点。

div.wrapper {
 width:200px;
 height: 30px;
 background: #ccc; /* グレー */
 overflow:hidden;
}
p {
 float: left;
 width: 60px;
 height: 50px;
 background: #0f0; /* 緑 */
}

以下、表示結果。
←クリックで拡大表示
子がfloatしていても親要素の指定領域内のみが表示される。

9.8の条件で親要素のheight指定を取り除く
以下、コード変更点。

div.wrapper {
 width:200px;
 background: #ccc; /* グレー */
 overflow:hidden;
}

以下、表示結果。
←クリックで拡大表示
子要素の指定領域(高さ)が表示され、親要素の高さが子要素の高さに合わせられた。

10.9の条件で親要素へのoverflow:hiddenを取り除く
以下、コード変更点。

div.wrapper {
 width:200px;
 background: #ccc; /* グレー */
}

以下、表示結果。
←クリックで拡大表示
親要素の高さは消え、子要素が指定領域(高さ)からはみ出て表示される。

以上の結果から、以下のことが分かる。

  • overflow:hiddenを指定しないと、幅や高さを指定していても、中身が大きい場合ははみ出して表示される。
  • overflow:hiddenを指定した要素に幅や高さが指定してあれば、その指定領域内のみが表示される(子要素がある場合、子へのfloat指定の有無は関係ない)。
  • 親にoverflow:hiddenを指定した場合、子は親の領域に従う(親の領域内のみ表示される)。
  • 子に対するoverflow:hiddenは親には影響しない。
  • 親子どちらにもoverflow:hiddenを指定せずに子にfloatを指定した場合、親の指定領域は子の存在を無視したものになる。
  • 子にfloatを指定した状態で親にoverflow:hiddenを指定すると、親の領域は子の領域分だけ拡張される(子の領域が存在している扱いとなる)。ただし、親に拡張する方向の領域(幅or高さ)指定がないことが必須条件。
  • 子に幅や高さを指定していて、子の中身がその領域からはみ出ていた場合に親にoverflow:hiddenを指定すると、子の指定領域内が表示される。はみ出し方向に関する親の領域もそれに合わせるようになる。

ここでしばしば出くわしそうな状況として、複数の子要素がfloatして、親要素の指定領域からはみ出すような場合について検証する。

11.floatして横並びになった子要素のトータルの幅が親要素の指定幅より小さい場合
以下、コード。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>overflow:hiddenの検証</title>
<style>
body, div, p {
 margin: 0;
 padding: 0;
}
div.wrapper {
 width:150px;
 background: #ccc; /* グレー */
 overflow:hidden;
}
p {
 float: left;
 width: 60px;
 height: 50px;
 background: #0f0; /* 緑 */
}
</style>
</head>
<body>
<div class="wrapper">
<p>あかさたなはまやらわアカサタナハマヤラワ</p>
<p>あかさたなはまやらわアカサタナハマヤラワ</p>
</div><!-- .wrapper end -->
</body>
</html>

以下、表示結果。
←クリックで拡大表示
上記でまとめた結果と同様となる。親に高さを指定していないので、子の指定高さに合わせるようになる。

12.floatして横並びになった子要素のトータルの幅が親要素の指定幅より大きい場合
以下、コード。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>overflow:hiddenの検証</title>
<style>
body, div, p {
 margin: 0;
 padding: 0;
}
div.wrapper {
 width:150px;
 background: #ccc; /* グレー */
 overflow:hidden;
}
p {
 float: left;
 width: 60px;
 height: 50px;
 background: #0f0; /* 緑 */
}
</style>
</head>
<body>
<div class="wrapper">
<p>あかさたなはまやらわアカさタナハマヤラワ</p>
<p>あかさたなはまやらわアカサタナハマヤラワ</p>
<p>あかさたなはまやらわアカザタナハマヤラワ</p>
</div><!-- .wrapper end -->
</body>
</html>

以下、表示結果。
←クリックで拡大表示
結果は説明しにくいが、3つのpタグはそれぞれ指定領域(指定サイズ)での表示になっているが、横に入りきらずに下に落ちた分も表示されていることが分かる。

13.12の状態で親に高さを指定する
以下、コード変更点。

div.wrapper {
 width:150px;
 height: 30px;
 background: #ccc; /* グレー */
 overflow:hidden;

←クリックで拡大表示
親の指定領域内が表示される。

今回の検証結果はpタグからもテキストがはみ出るような例で行ったため、書き方も含めて分かり難くなってしまったが、overflow:hiddenを親に指定した場合は以下のようになると思われる。

  • 親に領域(幅及び高さ)指ある場合は、その領域内が表示(優先)される。
  • 親に領域指定がなく、子に領域指定がある場合は子に合わせるようになる。

以上のことから、子にfloatをかけて横並びにする場合、親からはみ出した分を表示させないためには、親に領域(幅及び高さ)を指定した上でoverflow:hiddenを指定するのがベターと考えられる。

また、floatした子の領域(高さ)を親に確保したい場合は、親に領域を指定せずにoverflow:hiddenを指定するのがベターと考えられる。