The CSS Podcast - 034: Overflow
コンテンツが親の範囲を超える場合、そのコンテンツを処理する方法はいくつかあります。スクロールしてスペースを追加したり、はみ出した部分を切り取ったり、省略記号で切り詰め部分を示すなど、さまざまなことができます。特に、スマートフォン アプリや複数の画面サイズを対象に開発する場合は、オーバーフローを考慮することが重要です。
CSS には 2 つの異なるクリッピング オプションがあります。text-overflow
はテキストの個々の行に使用し、overflow
プロパティはボックスモデルのオーバーフローを制御するために使用します。
text-overflow
で単一行のオーバーフローが発生
テキストノードを含む要素(段落 <p>
など)には、text-overflow
プロパティを使用します。要素の使用可能なスペースに収まらない場合の、テキストの表示方法を指定します。ページ上で表示可能な HTML テキストはすべて、テキストノードに格納されています。text-overflow
を使用するには、折り返しのない 1 行のテキストが必要です。そのため、overflow
を hidden
に設定し、折り返しを防止する white-space
値も設定する必要があります。
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
オーバーフロー プロパティの使用
要素に設定されたオーバーフロー プロパティは、子要素が使用可能なスペースよりも多くのスペースを必要とする場合に何が起こるかを制御します。これは、Google マップなどのインタラクティブ マップのように、ユーザーが特定のサイズに切り抜かれた大きな画像をパンするような場合に意図的に行うことができます。チャット アプリで、ユーザーが長いメッセージを入力してテキスト バブルに収まらない場合など、意図的でないこともあります。
オーバーフローは 2 つの部分で考えることができます。親要素には、変更されない厳密に制約されたスペースがあります。これはウィンドウと考えることができます。子要素は、親からより多くのスペースを必要とするコンテンツです。これは、窓から見えるものと考えることができます。オーバーフローを管理すると、ウィンドウでこのコンテンツをどのようにフレーム設定するかを指定できます。
垂直軸と水平軸でのスクロール
overflow-y
プロパティは、デバイスのビューポートの縦軸に沿った物理的なオーバーフローを制御します(上下にスクロール)。
overflow-x
プロパティ コントロールは、デバイスのビューポートの横軸に沿ってオーバーフローするため、左右にスクロールします。
スクロール方向の論理プロパティ
overflow-inline
プロパティと overflow-block
プロパティは、ドキュメントの向きと書き込みモードに基づいてオーバーフローを設定します。
overflow
の省略形
overflow
ショートカットを使用すると、overflow-x
スタイルと overflow-y
スタイルの両方を 1 行で設定できます。
overflow: hidden scroll;
2 つのキーワードを指定すると、1 つ目のキーワードが overflow-x
に適用され、2 つ目のキーワードが overflow-y
に適用されます。それ以外の場合は、overflow-x
と overflow-y
の両方で同じ値が使用されます。
値
overflow
プロパティで使用できる値とキーワードを詳しく見ていきましょう。
overflow: visible
(デフォルト)- プロパティを設定しないと、
overflow: visible
がウェブのデフォルト値になります。これにより、コンテンツが意図せず非表示になることがなくなり、「コンテンツを非表示にしない」または「正確なレイアウトの安全なレイアウト」という基本原則に沿ったレイアウトが実現します。 overflow: hidden
overflow: hidden
を使用すると、コンテンツは指定された方向にクリップされ、表示するためのスクロールバーは提供されません。overflow: scroll
overflow: scroll
は、スクロールバーを有効にして、ユーザーがコンテンツをスクロールできるようにします。コンテンツが現在はオーバーフローしていなくても、スクロールバーが表示されます。これは、サイズ変更などに基づいてコンテナが今後スクロール可能になる可能性がある場合に、将来のレイアウト シフトを減らし、スクロール可能な領域を視覚的にユーザーに準備するための優れた方法です。overflow: clip
overflow: hidden
と同様に、overflow: clip
のコンテンツは要素のパディング ボックスにクリップされます。clip
とhidden
の違いは、clip
キーワードではすべてのスクロール(プログラムによるスクロールを含む)も禁止される点です。overflow: auto
- 最後に、最もよく使用される値
overflow: auto
です。これにより、ユーザーの設定に従って、必要に応じてスクロールバーが表示されますが、デフォルトでは非表示になり、スクロールはユーザーとブラウザに委ねられます。
スクロールとオーバーフロー
これらの overflow
の動作の多くはスクロールバーを導入しますが、オーバーフロー コンテナのスクロールを制御できる特定のスクロール動作とプロパティがいくつかあります。
スクロールとユーザー補助
スクロール可能な領域がフォーカスを受け取れるようにすることが重要です。これにより、キーボード ユーザーは Tab キーでボックスに移動し、矢印キーを使用してスクロールできるようになります。
スクロール ボックスにフォーカスを設定できるようにするには、tabindex="0"
、aria-labelledby
属性を持つ名前、適切な role
属性を追加します。例:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
CSS を使って、ボックスにフォーカスがあることを示すと、outline
プロパティを使用して、スクロール可能になったことを視覚的に示せます。
CSS を使用してユーザー補助を適用するで、Adrian Roselli は CSS を使用してユーザー補助の回帰を防ぐ方法を示しています。たとえば、正しい属性が使用されている場合にのみ、スクロールを有効にしてフォーカス インジケーターを追加できます。次のルールでは、tabindex
、aria-labelledby
、role
属性がある場合にのみ、ボックスをスクロール可能にします。
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
ボックスモデル内のスクロールバーの位置
スクロールバーはパディング ボックス内のスペースを占有し、overlaid
ではなく inline
の場合、スペースを競合する可能性があります。レイアウト シフトの潜在的な原因について詳しくは、ボックスモデル モジュールをご覧ください。
root-scroller と impl-scroller
一部のスクローラーには、特にモバイル アプリケーションとハイブリッド アプリケーションの開発において、プルして更新の動作やその他の特別な動作があることに気づくかもしれません。このスクロール動作は、ルート スクロールで発生します。ページに存在するルート スクロールは 1 つだけです。デフォルトでは、documentElement がページのルート スクロールですが、ルート スクロールとなる要素を変更することで、documentElement 以外のスクロールに特別な動作を適用できます。この新しいスクロールを暗黙的なルート スクロールと呼びます。
ルート スクローラーを作成するには、スクローラー プロモーションと呼ばれる手法を使用します。コンテナを固定として配置することで、ビューポート全体を覆い、スクローラーを上に Z-Index で配置します。ルート スクロールとネストされた暗黙的スクロールの違いについては、こちらをご覧ください。
scroll-behavior
scroll-behavior
を使用すると、ブラウザ制御による要素のスクロールを有効にできます。これにより、.scrollTo()
やリンクなどのページ内ナビゲーションの処理方法を指定できます。
これは、prefers-reduced-motion と併用して、ユーザー設定に基づいたスクロール動作を指定する際に特に便利です。
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
overscroll-behavior
モーダル オーバーレイの終点に到達し、さらにスクロールを続けたときにオーバーレイの背後にあるページが移動した場合、これはスクロール チェーン、つまり親のスクロール コンテナまでバブリングしている状態です。overscroll-behavior
プロパティを使用すると、オーバーフロー スクロールが親コンテナに漏洩するのを防ぐことができます(スクロール チェーンと呼ばれます)。
理解度を確認する
オバーフローの知識をテストする
テキスト オーバーフロー要素のオーバーフローは同じですか?
overflow
プロパティは 2 つのキーワードを受け入れます。最初のキーワードはどの軸用ですか。
スクロールバーは、表示時にインラインでボックスモデルのどのスペースを使用しますか?
ネストされた暗黙的なスクロールでスクロールによる余分な運動量をトラップするには、どのプロパティを使用すればよいですか。
scroll-hint
scroll-behavior
overscroll-effect
scroll-padding
overscroll-behavior