The CSS Podcast - 034: Overflow
コンテンツが親の範囲を超える場合、そのコンテンツを処理する方法はいくつかあります。スクロールしてスペースを追加したり、はみ出した部分を切り取ったり、省略記号で切り詰め部分を示すなど、さまざまなことができます。スマートフォン アプリや複数の画面サイズを対象に開発する場合は、特にオーバーフローの考慮が重要です。
CSS には 2 つの異なるクリッピング オプションがあります。text-overflow
は個々のテキスト行に使用し、overflow
プロパティはボックスモデルのオーバーフローを制御するために使用します。
text-overflow
を使用した 1 行のオーバーフロー
テキストノードを含む要素(段落 <p>
など)には text-overflow
プロパティを使用します。要素の使用可能なスペースにテキストが収まらない場合に、テキストをどのように表示するかを指定します。ページ上で表示可能な HTML テキストはすべて、テキストノードに格納されています。text-overflow
を使用するには、折り返しのない 1 行のテキストが必要です。そのため、overflow
を hidden
に設定し、折り返しを防止する white-space
値も設定する必要があります。
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
overflow プロパティの使用
要素に設定されたオーバーフロー プロパティは、子要素が使用可能なスペースよりも多くのスペースを必要とする場合に何が起こるかを制御します。これは、Google マップなどのインタラクティブ マップのように、ユーザーが特定のサイズにクリップされた大きな画像をパンするような場合に意図的に行うことができます。チャット アプリで、ユーザーが長いメッセージを入力してテキスト バブルに収まらない場合など、意図的でないこともあります。
オーバーフローは 2 つの部分に分けることができます。親要素には、変更されない厳密に制約されたスペースがあります。これはウィンドウと考えることができます。子要素は、親からより多くのスペースを必要とするコンテンツです。これは、窓から見えるものと考えることができます。オーバーフローを管理すると、ウィンドウでこのコンテンツをどのようにフレーム設定するかを指定できます。
縦軸と横軸のスクロール
overflow-y
プロパティは、デバイス ビューポートの垂直軸に沿った物理的なオーバーフローを制御します。つまり、上下にスクロールします。
overflow-x
プロパティは、デバイスのビューポートの水平軸に沿ったオーバーフローを制御し、左右にスクロールします。
スクロール方向の論理プロパティ
overflow-inline
プロパティと overflow-block
プロパティは、ドキュメントの向きと書き込みモードに基づいてオーバーフローを設定します。
overflow
の省略形
overflow
ショートカットを使用すると、overflow-x
スタイルと overflow-y
スタイルの両方を 1 行で設定できます。
overflow: hidden scroll;
2 つのキーワードが指定されている場合、最初のキーワードは 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 と implicit-scroller
特にモバイル アプリやハイブリッド アプリを開発している場合、一部のスクロールにはプルして更新する動作やその他の特別な動作があることに気づくことがあります。このスクロール動作は、ルート スクロールで発生します。ページに存在するルート スクロールバーは 1 つだけです。デフォルトでは、documentElement がページのルート スクロールですが、ルート スクロールとなる要素を変更することで、documentElement 以外のスクロールに特別な動作を適用できます。この新しいスクロールを暗黙的なルート スクロールと呼びます。
ルート スクロールを作成するには、スクロールの昇格と呼ばれる手法を使用します。コンテナを固定として配置し、ビューポート全体を覆うようにし、スクロールの z インデックスを一番上にします。ルート スクロールとネストされた暗黙的スクロールの違いについては、こちらをご覧ください。
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
overscroll-behavior
scroll-padding
scroll-behavior
overscroll-effect