CSSオーバーフローメカニズムについての簡単な説明

CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?

実際の開発プロセスでは、コンテンツのオーバーフローがよく見られます。このメカニズムを深く理解していないと、「なぜこの要素は祖先要素の overflow:hidden の影響を受けないのか」といった疑問に遭遇することがよくあります。ここでスクロールバーが表示される要素はどれですか?このスクロールバーを削除するにはどうすればいいですか?特定の要素にスクロール機能を追加するにはどうすればよいですか?

この記事では、CSS 標準に基づいた CSS オーバーフローメカニズムの詳細について説明します。

オーバーフロー

オーバーフローは、ボックス (ブロックコンテナーボックス) の内容 (子要素、孫要素、およびその他の子孫) がボックス自体のサイズを超えた場合に発生します。このとき、CSS プロパティ overflow によってオーバーフローの処理方法が決まります。この CSS プロパティは誰もがよく知っているので、ここでは説明しません。注意が必要な点をいくつか示します。

オーバーフローは、要素のすべてのコンテンツのクリッピングとスクロールに影響しますが、例外が 1 つあります。「オーバーフローは、要素のビューポートまたは祖先を包含ブロックとする子孫要素 (およびそれぞれのコンテンツと子孫) を除く、要素のすべてのコンテンツのクリッピングに影響します。」つまり、オーバーフローが配置されている要素は、コンテンツ要素の直接または間接の包含ブロックである必要があり、オーバーフロープロパティはこのコンテンツ要素に影響します。たとえば、<A><B><C><C/><B/><A/> です。一般的に、B のオーバーフローは C に影響します。ただし、C がビューポートまたは A に対して相対的に配置されている場合 (たとえば、position:absolute を使用)、C の表示は B の切り取りやスクロールの影響を受けません。

スクロールバーが必要な場合は、境界線とパディングの間に配置されます。親要素がスクロールバーを生成すると、スクロールバー用のスペースを確保するために、生成される包含ブロックのサイズが縮小されます。

<html> と <body> のオーバーフロープロパティが浮上します。「UA は、ルート要素に設定された 'overflow' プロパティをビューポートに適用する必要があります。ルート要素が HTML の "HTML" 要素または XHTML の "html" 要素であり、その要素に HTML の "BODY" 要素または XHTML の "body" 要素が子として存在する場合、ルート要素の値が 'visible' であれば、ユーザーエージェントは代わりに最初の子要素からビューポートに 'overflow' プロパティを適用する必要があります。ビューポートに使用される 'visible' 値は 'auto' として解釈される必要があります。値が伝播される要素は、'overflow' に 'visible' という値を使用する必要があります。」

次のように推測できます。

一般的に言えば、スクロールバーを持つことができるのは要素のみです (より正確には、ブロックコンテナーボックスを生成する要素のみがスクロールバーを持つことができます)。ビジュアルビューポートは例外です。要素ではありませんが、スクロールバーを持つこともできます。 <html> と <body> に overflow 属性が設定されておらず、デフォルト値の visible が使用されている場合 (ほとんどのシナリオではこれが当てはまります)、ビジュアルビューポートのオーバーフローは自動になります。つまり、Web ページのコンテンツがビジュアルビューポートを超えると、ビジュアルビューポートにスクロールバーが表示されます。

<html> の最終的なオーバーフローは常に表示されます。つまり、<html> 要素にはスクロールバーを含めることはできません。

<body> に非表示のオーバーフローを設定する場合は、<body> のオーバーフローがバブルされないように、まず <html> にバブルする非表示の値を設定する必要があります。ちょっとした練習

ちょっとした練習:

上記の原則を使用すると、ビジュアルビューポートと <body> の両方に水平スクロールバーと垂直スクロールバーが含まれ、合計 4 つのスクロールバーになります。 overflow: scroll は使用できません (簡単すぎるため)。

ステップ：

スクロールバーが表示されるように、ビジュアルビューポートと <body> の両方の最終オーバーフロー値を auto に設定します。
視覚的なビューポートと <body> のオーバーフローをトリガーします。コンテンツのサイズを大きく設定することでこれを実行します。

コード + コメント:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ">
  <title>テスト</title>
  <スタイル>
    * {
      パディング: 0;
      マージン: 0;
      ボックスのサイズ: 境界線ボックス;
    }

    html{
      /* HTML を常にビジュアル ビューポートと同じサイズにします (ブラウザー ウィンドウをズームまたはサイズ変更した場合でも)。これにより、本体をビジュアル ビューポートよりも大きいサイズ (110%) に設定できるようになります。
      デフォルトでブロックとなる要素の場合、width: 100% は省略できます。*/
      幅: 100%;
      高さ: 100%;
      /* 非表示の値はビジュアルビューポートにバブルされ、ビジュアルビューポートにスクロールバーを表示できるようになります*/
      オーバーフロー:自動;
      境界線: 15px 赤
    }

    体 {
      /* 本文をスクロール可能にする*/
      オーバーフロー:自動;
      /* 本文が HTML をオーバーフローし、その結果、最初の包含ブロックがオーバーフローし、ビジュアル ビューポートがオーバーフローして、ビジュアル ビューポートにスクロール バーが表示されます。
      もちろん、HTML 要素のサイズを大きくしたり、本文に position: absolute div を作成したりするなど、他のさまざまな方法でビジュアル ビューポートのオーバーフローをトリガーすることもできます */
      幅: 110%;
      高さ: 110%;
      境界線: 15px 緑
    }

    主要 {
      /* main が body をオーバーフローし、スクロール バーが body に表示される */
      幅: 110%;
      高さ: 110%;
      境界線: 15px 青一色;
    }
  </スタイル>
</head>

<本文>
  <メイン>
  </メイン>
</本文>

</html>

結果：

上記のコードを Chrome で自分で開くと、どのように実行されるかがより明確にわかります。

絶対的な方法で最初の包含ブロックをオーバーフローすることも可能です。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ">
  <title>テスト</title>
  <スタイル>
    * {
      パディング: 0;
      マージン: 0;
      ボックスのサイズ: 境界線ボックス;
    }

    html{
      /* HTML を常にビジュアル ビューポートと同じサイズにします (ブラウザー ウィンドウをズームまたはサイズ変更した場合でも)。これにより、本体をビジュアル ビューポートよりも大きいサイズ (110%) に設定できるようになります。
      デフォルトでブロックとなる要素の場合、width: 100% は省略できます。*/
      幅: 100%;
      高さ: 100%;
      /* 非表示の値はビジュアルビューポートにバブルされ、ビジュアルビューポートにスクロールバーを表示できるようになります*/
      オーバーフロー:自動;
      境界線: 15px 赤
    }

    体 {
      /* 本文をスクロール可能にする*/
      オーバーフロー:自動;
      /* main を body よりも大きいサイズ (110%) に設定できるように body のサイズを設定します。
      デフォルトでブロックとなる要素の場合、width: 100% は省略できます。*/
      高さ: 100%;
      境界線: 15px 緑
    }

    主要 {
      /* main が body をオーバーフローし、スクロール バーが body に表示される */
      幅: 110%;
      高さ: 110%;
      境界線: 15px 青
    }

    .abs {
      /* 絶対的な方法で最初の包含ブロックをオーバーフローし、ビューポートをオーバーフローします */
      位置: 絶対;
      幅: 100ピクセル;
      高さ: 100px;
      右: -100px;
      下: -100px;
      境界線: 15px 実線青紫;
    }
  </スタイル>
</head>

<本文>
  <メイン>
  </メイン>

  <div class="abs"></div>
</本文>

</html>

結果：

上記のコードを Chrome で自分で開くと、どのように実行されるかがより明確にわかります。

スクロールバーがどの要素に属しているかを確認するにはどうすればよいでしょうか?

スクロールバーが属する要素は、Chrome DevTools を通じて確認できます。

前述したように、スクロールバーは要素の境界線とパディングの間に配置されます。 Chrome DevTools を使用して要素を選択し、スクロールバーがハイライト表示された領域 (境界線) のすぐ内側にあることがわかった場合、スクロールバーは現在の要素に属しています。

スクロールバーがビジュアルビューポートに属しているかどうかを判断するには、まず右と下のスクロールバーをそれぞれ下と右にスクロールします (この手順は非常に重要で、スクロールバーの下に隠れたコンテンツがないことを確認します)。次に、 Ctrl+Shift+Cを押して、右側または下部のスクロールバーを選択します。強調表示された領域にスクロールバーが含まれていない場合、スクロールバーはどの要素にも属していない、つまりビジュアルビューポートに属していることを意味します。