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

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を押して、右側または下部のスクロール バーを選択します。強調表示された領域にスクロール バーが含まれていない場合、スクロール バーはどの要素にも属していない、つまりビジュアル ビューポートに属していることを意味します。

参考文献

CSS2.1 標準

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  ウェブページ HTML 順序付きリスト ol と順序なしリスト ul

>>:  シャトルボックス機能を実装するためのVueの詳細なコード

推薦する

Linux システムで tcpdump を使用してパケットをキャプチャする方法

まずサンプルコードを見てみましょう: 1. 共通パラメータ tcpdump -i eth0 -nn ...

CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...

Linux のプロセスクラッシュの原因をコアダンプ技術を使用して追跡する簡単な分析

最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...

Linux ファイルとユーザー管理の実践

1. /etc ディレクトリ内の、文字以外の文字で始まり、その後に文字と任意の長さのその他の文字が続...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

Dockerコンテナ接続実装手順の分析

一般的に言えば、コンテナが起動した後、ポート マッピングを通じてコン​​テナが提供するサービスを使用...

HTML ドラッグ アンド ドロップ機能の実装コード

Vueベースこの機能の核となるアイデアは、JavaScript コードを通じてページ上のノードの左余...

Apache ポートに基づいて仮想ホストを作成する例

apache: ポートに基づいて仮想ホストを作成する仮想ホスト(a、b、c)の作成を例に挙げます1)...

MySQL クエリ フィールド タイプが json の場合の 2 つのクエリ メソッド

テーブル構造は次のとおりです。 id varchar(32) 情報JSONデータ: id = 1 i...

HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...

Vue3.0はチェックボックスコンポーネントのカプセル化を実装します

この記事では、チェックボックスコンポーネントのカプセル化を実装するためのvue3.0の具体的なコード...

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

CSS フィルターを使用してマウスオーバー効果を記述する例

CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...