このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

overflow”プロパティ:はみ出すコンテンツの処理

記事Nov. 7th,2020
要素の領域に収まらずはみ出すコンテンツの処理方法を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 overflow: visible;
適用対象 ブロック・コンテナ、フレックス・コンテナ、グリッド・コンテナ
継承 No
パーセント値 一括指定が対象とする各プロパティの定義に依る
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

overflow”プロパティは要素の領域に収まりきらず、はみ出してしまうコンテンツの処理方法を指定する以下のプロパティの一括指定プロパティです。

サンプルコード

div { overflow: scroll;}

説明
visible 要素からあふれるコンテンツは要素の外側にはみ出して表示されます
hidden 要素からあふれるコンテンツはパディング・ボックスに合わせて切り取られ、スクロールバーなどのスクロールのためのインターフェースも表示されません (スクリプトなど他の手段によってスクロールすることができます。)
clipCSS Overflow Module Level 3 で追加 要素からあふれるコンテンツはoverflow-clip-margin”プロパティで指定した境界で切り取られ、スクロールバーなどのスクロールのためのインターフェースも表示されません (スクリプトなど他の手段によってスクロールすることもできません。)
scroll 要素からあふれるコンテンツはパディング・ボックスに合わせて切り取られますが、スクロールして表示することができます (スクロールバーなどのスクロールのためのインターフェースがあふれるコンテンツの有無にかかわらす表示されます。また、プリンターは要素からあふれた部分を印刷する場合があります。)
auto 要素からあふれるコンテンツがある場合は“scroll”、なければ“hidden”として扱われます (スクロールバーなどのスクロールのためのインターフェースがあふれるコンテンツがある場合のみ表示されます。)
共通キーワード

値の指定方法

値が1つの場合はその値は水平方向と垂直方向の両方の処理方法を指定します。

div { overflow: 〚すべての方向の処理方法〛;}

また、2つの値をホワイトスペースで区切って記述することができます。この場合は1つ目の値は水平方向の処理方法、2つ目の値は垂直方向の処理方法を指定します。

div { overflow: 〚水平方向の処理方法〛 〚垂直方向の処理方法〛;}

なお、いずれかの方向の値が“visible”と“clip”のいずれでもない場合、もう一方の方向の値は“visible”は“auto”、“clip”は“hidden”とみなされます。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 作業草稿(WD)
overflow
定義なし

定義あり

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 作業草稿(WD)
visible
定義なし

定義あり

定義あり
hidden
定義なし

定義あり

定義あり
scroll
定義なし

定義あり

定義あり
auto
定義なし

定義あり

定義あり
clip
定義なし

定義なし

定義あり

使用例

はみ出すコンテンツの処理方法を指定する

div { overflow: visible;}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

div { overflow: hidden;}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

div { overflow: clip;}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

div { overflow: scroll;}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

div { overflow: auto;}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

それぞれの方向の処理方法を指定する

div { overflow: scroll hidden;}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク