CSS オーバーフロー
CSS オーバーフローモジュールのプロパティを使用すると、視覚メディアでスクロール可能なオーバーフローを処理することができます。
オーバーフローは、要素ボックス内のコンテンツがボックスの 1 つまたは複数の端を越えるときに起こります。スクロール可能なオーバーフローとは、要素ボックスの外側に現れるコンテンツのことで、スクロール機構を追加したい場合があります。CSS オーバーフローのプロパティを使用すると、コンテンツが要素ボックスからあふれたときに何が起こるかを制御することができます。
コンテンツがはみ出すものの、 CSS のボックスモデルに関与しない描画効果は、レイアウトには影響しません。この種のオーバーフローはインクオーバーフローとも呼ばれます。インクオーバーフローの例としては、ボックスシャドウ、境界画像、テキスト装飾、はみ出したグリフ、輪郭線などが挙げられます。インクオーバーフローはスクロール可能なオーバーフロー領域を拡張しません。
オーバーフローの実際
次の操作可能な例を使用して、隣接する固定サイズボックスのコンテンツのオーバーフローとスクロールバーに対する様々なオーバーフロープロパティ値の効果を確認してみましょう。
この例では、overflow-clip-margin
プロパティと width
プロパティの値を変更するオプションも含まれています。また、overflow プロパティがスクロールコンテナーを生成する場合、コンテンツをプログラムでスクロールすることもできます。 overflow: clip
を選択し、 overflow-clip-margin
の値を変えた場合の効果を確認します。 overflow: hidden
または overflow: scroll
を選択し、様々な ScrollLeft
と ScrollTop
スライダーの設定を調べます。
上のコンテンツボックスにはリンクが記載されていますが、これはキーボードフォーカスがオーバーフローやスクロール動作に与える効果を示すためのものです。リンクに移動したり、コンテンツをプログラムでスクロールしてみてください: 列挙値である <overflow>
がスクロールコンテナーを生成した場合のみ、コンテンツはスクロールします。
リファレンス
CSS プロパティ
overflow
一括指定overflow-block
overflow-clip-margin
overflow-inline
overflow-x
overflow-y
scroll-behavior
scrollbar-gutter
text-overflow
-webkit-line-clamp
メモ: CSS オーバーフローモジュールレベル 4 では、block-ellipsis
、continue
、line-clamp
、max-lines
プロパティが導入されました。これらはまだ実装されていません。
データ型
<overflow>
列挙値
ガイド
- コンテンツのオーバーフロー
-
CSS の構成要素です。オーバーフローとは何か、どのように管理するかを学びます。
- 名前付きスクロール進行タイムラインアニメーションの作成
-
CSS スクロールタイムライン
scroll-timeline-name
およびscroll-timeline-axis
プロパティとscroll-timeline
の一括指定は、スクロールコンテナーのスクロールオフセットに関連付けられたアニメーションを作成します。
関連概念
scrollbar-width
プロパティscrollbar-color
プロパティscrollbar-gutter
プロパティscroll-behavior
プロパティscroll-margin
一括指定プロパティscroll-padding
一括指定プロパティscroll-snap-align
プロパティscroll-snap-stop
プロパティscroll-snap-type
プロパティtext-overflow
プロパティ::-webkit-scrollbar
擬似要素scrollbar
ARIA ロール- Element の
scroll()
メソッド - Element の
scrollBy()
メソッド - Element の
scrollIntoView()
メソッド - Element の
scrollTo()
メソッド - Element の
scrollTop
プロパティ - Element の
scrollLeft
プロパティ - Element の
scrollWidth
プロパティ - Element の
scrollHeight
プロパティ - Document の
scroll
イベント - 用語集の「スクロールコンテナー」
- 用語集の「インクオーバーフロー」
仕様書
Specification |
---|
Unknown specification |
Unknown specification |
関連情報
- CSS スクロールバースタイル設定モジュール
- CSS スクロールスナップモジュール
- CSSOM view モジュール
- スクロール可能なオーバーフローのデバッグの方法