オーバーフロー

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 プロパティを使用すると、オーバーフロー スクロールが親コンテナに漏洩するのを防ぐことができます（スクロール チェーンと呼ばれます）。

理解度を確認する

オバーフローの知識をテストする

リソース

Smashing Magazine の「CSS でのオーバーフローおよびデータ損失」