【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」が設定されていても)。
オーバーフロー: 可視
デフォルトでは、オーバーフローはvisibleつまり、クリップされず、要素のボックスの外にレンダリングされます。
レイアウトをより適切に制御したい場合は、overflow プロパティを使用できます。オーバーフロー プロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
オーバーフロー: 非表示
値hiddenオーバーフローはクリップされ、残りのコンテンツは非表示になります。
レイアウトをより適切に制御したい場合は、overflow プロパティを使用できます。オーバーフロー プロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
オーバーフロー: スクロール
値をscroll、オーバーフローがクリップされ、ボックス内をスクロールするためのスクロールバーが追加されます。これにより、水平方向と垂直方向の両方にスクロールバーが追加されることに注意してください（必要がない場合でも）。
レイアウトをより適切に制御したい場合は、overflow プロパティを使用できます。オーバーフロー プロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
オーバーフロー: 自動
値autoはscrollに似ているが、必要なときにスクロールバーを追加します。
レイアウトをより適切に制御したい場合は、overflow プロパティを使用できます。オーバーフロー プロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定します。
オーバーフロー x とオーバーフロー 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-wrap | ブラウザーが長い単語で改行できるかどうかを指定します。 彼らはそのコンテナをオーバーフローします。 |
| overflow-x | コンテンツが要素のコンテンツ領域からはみ出した場合、コンテンツの左端/右端をどうするかを指定します。 |
| overflow-y | コンテンツが要素のコンテンツ領域からはみ出した場合、コンテンツの上端/下端をどうするかを指定します。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。