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

overflow-x:水平方向にはみ出すコンテンツの処理CSS3で追加

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

プロパティについて

概要

初期値 overflow-x: visible;
適用対象 ブロック・コンテナ、フレックス・コンテナ、グリッド・コンテナ
継承 しない
パーセント値 パーセント値は指定できません

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

サンプルコード

div { overflow-x: scroll;}

説明
visible 要素からはみ出すコンテンツは要素の外側にはみ出して表示されます
hidden 要素からはみ出すコンテンツは表示されず、スクロールバーなどのスクロールのためのインターフェースも表示されません (スクリプトなど他の手段によってスクロールすることができます。)
clip 要素からはみ出すコンテンツは表示されず、スクロールバーなどのスクロールのためのインターフェースも表示されません (スクリプトなど他の手段によってスクロールすることもできません。)
scroll 要素からはみ出すコンテンツは表示されませんが、スクロールバーなどのスクロールして表示するためのインターフェースが表示されます (スクロールのためのインターフェースははみ出すコンテンツの有無にかかわらす表示されます。また、プリンターははみ出した部分を印刷する場合があります。)
auto 要素からはみ出すコンテンツがある場合は“scroll”、なければ“hidden”として扱われます (スクロールのためのインターフェースははみ出すコンテンツがある場合のみ表示されます。)

overflow-y”プロパティの値が“visible”と“clip”のいずれでもない場合、“visible”は“auto”、“clip”は“hidden”とみなされます。

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC)
overflow-x
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC)
visible
定義なし

定義なし

定義あり
hidden
定義なし

定義なし

定義あり
clip
定義なし

定義なし

定義あり
scroll
定義なし

定義なし

定義あり
auto
定義なし

定義なし

定義あり

使用例

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

div { overflow-x: visible;}

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

夏は夜。
月の頃はさらなり、闇もなほ、螢飛びちがひたる。
雨など降るも、をかし。

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

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

div { overflow-x: hidden;}

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

夏は夜。
月の頃はさらなり、闇もなほ、螢飛びちがひたる。
雨など降るも、をかし。

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

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

div { overflow-x: clip;}

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

夏は夜。
月の頃はさらなり、闇もなほ、螢飛びちがひたる。
雨など降るも、をかし。

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

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

div { overflow-x: scroll;}

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

夏は夜。
月の頃はさらなり、闇もなほ、螢飛びちがひたる。
雨など降るも、をかし。

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

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

div { overflow-x: auto;}

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

夏は夜。
月の頃はさらなり、闇もなほ、螢飛びちがひたる。
雨など降るも、をかし。

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

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

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