overflow

CSSプロパティ「overflow」の解説をサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

overflow

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

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

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

hidden はみ出した部分を非表示にする。
scroll はみ出した部分をスクロールで表示する。
auto ブラウザに任せる。(スクロールバーが表示されるブラウザもある)
visible 初期値。ボックスからはみ出して表示する。

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

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

はみ出した部分が非表示となる。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

サンプル(B)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

はみ出した部分をスクロールで表示する。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

サンプル(C)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

初期値。ボックスをはみ出して表示される。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト