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を指定するのがベターと考えられる。