【CSS】overflowの使い方！hiddenやscrollの記述方法について
CSSoverflowプロパティは、大きすぎて領域に収まらないコンテンツをどうするかを制御します。
このテキストは非常に長く、コンテナの高さはわずか100ピクセルです。そのため、読者がコンテンツをスクロールできるように、スクロールバーが追加されています。 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolor magna aliquam erat volutpat.これまで見てきたように、体罰から何らかの利益を得るために体罰の行使に参加する人は最小限に抑えられます。しかし、duis または eum iriure dolor in hendrerit in vulputate velit esse molestie consequat、または illum dolore eu feugiat nulla facilisis at vero eros et accumsan et justo hat dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi eleifandオプションの宿題を支払った自由時間のために、私はより多くの投資を行うことができるという資金調達のドーミングはありません.型には生来の明快さはありません。それらを明確にするのは、それらの読者の使用です。
CSS オーバーフロー
overflowプロパティは、要素のコンテンツが大きすぎて指定された領域に収まらない場合に、コンテンツをクリップするか、スクロールバーを追加するかを指定します。
overflowプロパティには次の値があります。
visible- デフォルト。オーバーフローはクリップされません。コンテンツは要素のボックスの外側にレンダリングされますhidden- オーバーフローがクリップされ、残りのコンテンツが非表示になりますscroll- オーバーフローがクリップされ、スクロールバーが追加されて残りのコンテンツが表示されますauto-scrollに似ていますが、必要な場合にのみスクロールバーを追加します
注：overflowプロパティは、指定された高さのブロック要素に対してのみ機能します。
注：OS X Lion(Macの場合)では、スクロールバーはデフォルトで非表示になっており、使用されている場合にのみ表示されます(「overflow:scroll」が設定されていても)。
overflow: visible
デフォルトでは、オーバーフローはvisibleつまり、クリップされず、要素のボックスの外にレンダリングされます。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。overflowプロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
overflow: hidden
hiddenの値を使用すると、オーバーフローはクリップされ、残りのコンテンツは非表示になります。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。overflowプロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
overflow: scroll
scrollの値を使用すると、オーバーフローがクリップされ、ボックス内をスクロールするためのスクロールバーが追加されます。これにより、水平方向と垂直方向の両方にスクロールバーが追加されることに注意してください(必要がない場合でも）。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。orverflowプロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
overflow: auto
auto値はscrollに似ているが、必要な場合のみにスクロールバーを追加します。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。orverflowプロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
overflow-xとoverflow-y
overflow-xとoverflow-yプロパティは、コンテンツのオーバーフローを水平または垂直(または両方)のみに変更するかどうかを指定します。
overflow-xコンテンツの左端/右端をどうするかを指定します。overflow-yコンテンツの上端/下端の処理方法を指定します。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。overflowプロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
例
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
すべてのCSS overflowプロパティ
|
プロパティ |
説明 |
|---|---|
| overflow | コンテンツが要素のボックスをオーバーフローした場合の動作を指定します。 |
| overflow-wrap |
長い単語がコンテナから溢れた場合にブラウザが行を分割できるかどうかを指定します。 |
| overflow-x | コンテンツが要素のコンテンツ領域からはみ出した場合、コンテンツの左端/右端をどうするかを指定します。 |
| overflow-y | コンテンツが要素のコンテンツ領域からはみ出した場合、コンテンツの上端/下端をどうするかを指定します。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。