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

“CSS Overflow Module”

記事Aug.21st, 2021
CSS3で大きさに制約のある要素からあふれるコンテンツの扱いについて定義した“CSS Overflow Module”について。

仕様書の概要

概要

CSS Box Model Module”は大きさに制約のある要素からあふれるコンテンツの扱いについて定義した仕様書です。

要素からあふれるコンテンツの切り取り方やスクロールによる表示について定義しています。

仕様書

定義されているプロパティ
定義されている関数
定義されているセレクタ

用語など

インキ・オーバーフロー

インキ・オーバーフロー(Ink Overflow)”はボックスのボーダー・ボックスの外側にはみ出して何らかの視覚効果をもたらす部分です。インキ・オーバーフローは空間を占有せず、レイアウトには影響を与えません。

box-shadow”プロパティによる影、outline”プロパティなどによる輪郭、border-image”プロパティなどによる画像境界線、text-decoration”プロパティなどによるテキスト装飾、アセンダーやディセンダーなどの文字の突出した部分などは インキ・オーバーフローとして扱われます。

インキ・オーバーフローが占有する領域は“インキ・オーバーフロー・エリア(Ink Overflow Area)”と呼ばれ、インキ・オーバーフロー・エリアを内包することができる最小の長方形状の領域は“インキ・オーバーフロー・レクタングル(Ink Overflow Rectangle)”と呼ばれます。

スクロール可能オーバーフロー

スクロール可能オーバーフロー(Scrollable Overflow)”はボックスのパディング・ボックスからはみ出し、スクロールバーなどのスクロールのための機能が必要となる部分のことです。スクロール可能オーバーフローが占有する領域は“スクロール可能オーバーフロー・エリア(Scrollable Overflow Area)”と呼ばれます。

インキ・オーバーフロー・エリアを内包することができる最小の長方形状の領域は“スクロール可能オーバーフロー・レクタングル(Scrollable Overflow Rectangle)”と呼ばれます。

スクロール・コンテナ

スクロール可能オーバーフロー・エリアの切り取られた部分をスクロールによって表示することができるボックスは“スクロール・コンテナ(Scroll Container)”となります。overflow”プロパティoverflow-x”プロパティoverflow-y”プロパティの値が“scroll”や“hidden”、“auto”であるボックスはスクロール・コンテナとなります。

スクロール可能オーバーフロー・エリアが表示される部分は“スクロールポート(Scrollport)”と呼ばれ、スクロール・コンテナのパディング・ボックスと一致します。

スクロール・コンテナにスクロールバーが表示される場合、スクロールバーはパディングボーダーの間に表示されます。スクロールバーの幅はスクロール・コンテナによって生成される包括ブロックの大きさには含まれません。

スクロール操作を加える前に表示されるスクロール可能オーバーフロー・エリアを決める“初期スクロール位置(Initial Scroll Position)”はスクロール・コンテナの書字方向によって決定されます。初期スクロール位置はパディング・ボックスのブロック・スタートとインライン・スタート側の外縁で、左から右の横書きの場合はパディング・ボックスの左上です。

後方互換性のため、ボックスのブロック・スタートとインライン・スタート側のスクロール可能オーバーフロー・エリアは切り取られ、存在しないものとして扱われます。

特殊な要素のオーバーフロー

ルート要素に適用されたoverflow”プロパティoverflow-x”プロパティoverflow-y”プロパティはビューポートに適用されます。ただし、ルート要素がhtml”要素であり、そのoverflow”プロパティの値が“visible”であり、body”要素を子要素として持つ場合はbody”要素overflow”プロパティoverflow-x”プロパティoverflow-y”プロパティがビューポートに適用されます。

ビューポートに適用されるこれらのプロパティの適用元の要素の使用値は“visible”として扱われます。

これらの要素のdisplay”プロパティの値が“hidden”である場合など、ボックスを生成しない場合はこれらの要素の値はビューポートのものとしては使用されません。

ビューポートに適用される値が“visible”である場合は“auto”として扱われます。また、ビューポートに適用される値が“clip”である場合は“hidden”として扱われます。

定義されているCSSルール

プロパティ

プロパティ 説明
overflow-x: 水平方向にはみ出すコンテンツの処理の指定
overflow-y: 垂直方向にはみ出すコンテンツの処理の指定
overflow: はみ出すコンテンツの処理の指定
overflow-clip-margin:
overflow-block: ブロック軸方向にはみ出すコンテンツの処理の指定
overflow-inline: インライン軸方向にはみ出すコンテンツの処理の指定
scrollbar-gutter:
text-overflow: はみ出すコンテンツに省略記号を付与する
block-ellipsis:
line-clamp:
max-lines:
continue:

関数

関数 説明
fade() フェード効果の幅

セレクタ

擬似要素 説明
::nth-fragment()
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク