オーバーフロー

CSS ポッドキャスト - 034: Overflow

コンテンツが親の範囲を超えて広がる場合は、その処理方法に多くの選択肢があります。スクロールして余白を追加したり、はみ出した端をカットしたり、省略記号でカットオフを指定したりできます。オーバーフローは、スマートフォン アプリや複数の画面サイズ向けに開発する場合に特に重要です。

CSS には 2 種類のクリッピング オプションがあります。text-overflow は個々のテキスト行に対応し、overflow プロパティはボックスモデルでのオーバーフローを制御するのに役立ちます。

text-overflow による 1 行のオーバーフロー

text-overflow プロパティは、段落 <p> などのテキスト ノードを含む要素で使用します。要素内のスペースに収まらない場合にテキストをどのように表示するかを指定します。ページ上の表示可能な 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 つのキーワードを指定した場合、最初のキーワードは 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 の場合にスペースを奪う可能性があります。ボックスモデル モジュールでは、レイアウト シフトの潜在的な要因についてさらに詳しく説明しています。

ルート スクローラーと暗黙的スクローラーの比較

特にモバイル アプリやハイブリッド アプリケーション向けに開発する場合、一部のスクローラーには、下にスワイプして更新する動作やその他の特別な動作がある場合があります。このスクロール動作はルート スクローラーで発生します。ページ上には、ルート スクローラーは 1 つだけです。デフォルトでは、documentElement はページのルート スクローラーです。ただし、どの要素がルート スクローラーであるかを変更することで、documentElement 以外のスクローラーに特別な動作を適用できます。この新しいスクローラーを暗黙的なルート スクローラーと呼びます。

ルート スクローラーを作成するには、スクローラー プロモーションというものを使用します。そのためには、コンテナを固定として配置し、コンテナがビューポート全体を覆い、上部にスクローラーが Z-Index が表示されるようにします。ルート スクローラーとネストされた暗黙的スクローラーの比較については、こちらをご覧ください。

スクロール動作

scroll-behavior を使用すると、ブラウザ制御による要素スクロールをオプトインできます。これにより、.scrollTo() やリンクなどのページ内ナビゲーションの処理方法を指定できます。

これは、prefers-reduced-motion とともにユーザーの設定に基づいてスクロール動作を指定する場合に特に便利です。

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

オーバースクロール動作

モーダル オーバーレイの最後に到達した後、スクロールを続けてオーバーレイの背後にあるページが移動した場合、スクロールのチェーン、つまり親スクロール コンテナまでバブルアップします。overscroll-behavior プロパティを使用すると、オーバーフロー スクロールが親コンテナに漏れる（スクロール チェーンと呼ばれる）ことを防止できます。

理解度チェック

オーバーフローに関する知識を確認する

関連情報

Smashing Magazine の CSS でのオーバーフローとデータ損失