overflow プロパティ

　overflow プロパティは、エレメントの内容がはみ出るとき（オーバーフロー）の表示方法を指定するプロパティです。そのまま表示、はみ出る部分を表示しない、スクロールを付けるといったことができます。

　overflow プロパティが機能するには、widthプロパティやheightプロパティなどでエレメントのサイズが固定されていることが条件です。

overflow プロパティの値を半角スペースで区切ることでoverflow-x、overflow-yプロパティを一括して指定することができます。

表示し切れない部分があるとスクロールを表示（Exampleを参照）

width: 100%;
height: 300px;
overflow: scroll auto;

ページ内 Index

構文（Syntax）
値（Values）
備考（Remarks）
Example

構文(Syntax)

CSS

overflow: [ visible | hidden | clip | scroll | auto ] | [ overflow-x overflow-y ] ;

DOM ( JavaScript )

値の取得

String = object.style.overflow;

値の設定

object.style.overflow=" [ visible | hidden | clip | scroll | auto ] | [ overflow-x overflow-y ] "

値（Values）

value	概要
visible	初期値（default値）、エレメント領域をはみ出して表示
hidden	エレメント内に収まらない部分は表示しない
scroll	内容が収まるようにスクロールバーを設定。印刷ではスクロールバーは無視されることがある
auto	内容が収まるようにスクロールバーを設定、内容が収まるならスクロールバーは設定されない
initial	初期値に戻します。
inherit	親エレメントから継承します。

備考（Remarks）


Default value	visible
Inherited（継承）	No
Animatable	No

Example

　overflowの例です。親エレメントid="over"のサイズよりも子エレメントid="contents"のサイズを大きく指定しています。そのために親エレメントの縦、横にスクロールが表示されます。
　エレメントがブロックレベルエレメントであることと、widthプロパティとheightプロパティでサイズが固定されていることが条件です。