overflow

overflow

ボックスの範囲からはみ出した部分の表示方法を指定するプロパティ。

通常、ボックスにwidth、heightで縦横のサイズを指定した場合、指定範囲をはみ出して表示されるが、overflowで表示方法を指定することで、スクロールバーを表示させたり、非表示にさせたりすることができる。

CSSレイアウトでは、指定サイズより大きい画像を掲載することで崩れが発生するが、レイアウトを構成するボックスにoverflowで「hidden」（非表示）を指定することで、これを防ぐことができる。

値

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

.sampleA { width:200px; height:50px; border:solid 1px #cc0000; overflow:hidden; }

<p class="sampleA">はみ出した部分を非表示にする。</p>

.sampleB { width:200px; height:50px; border:solid 1px #cc0000; overflow:scroll; }

<p class="sampleB">はみ出した部分をスクロールで表示する。</p>

.sampleB { width:200px; height:50px; border:solid 1px #cc0000; overflow:visible; }

<p class="sampleC">初期値。ボックスをはみ出して表示される。</p>