備忘録的リファレンス

overflowプロパティ

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

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

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

表示し切れない部分があるとスクロールを表示(Exampleを参照
width: 100%;
height: 300px;
overflow: scroll auto;

構文(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 valuevisible
Inherited(継承)No
AnimatableNo

Example

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