CSS Overflow モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。
インクオーバーフローとスクロール可能なオーバーフロー
CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。1つ目はインクオーバーフローと呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出したグリフ、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。
CSS で時に管理しなければならないオーバーフローをスクロール可能なオーバーフローと呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。
基本的な例
次のインタラクティブなデモでは、 overflow
プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
リファレンス
CSS プロパティ
標準外のプロパティ
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Overflow Module Level 3 overflow の定義 |
草案 |
構文を1つだけでなく1つまたは2つのキーワードに変更した |
CSS Level 2 (Revision 1) overflow の定義 |
勧告 | 初回定義 |
関連情報
- スクロールバーの外見を制御する
scrollbar-width
およびscrollbar-color
プロパティ