Articles
CSS入門
`overflow`と`contain`プロパティ

`overflow`と`contain`プロパティ

この記事ではoverflowとcontainプロパティについて説明します。

overflowプロパティによるスクロールバーの表示やクリッピングなどの記述の仕方を学べます。

YouTube Video

プレビュー用のHTML

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view" style="height: 100px;">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflowとcontainプロパティ

overflow

CSSのoverflowプロパティは、要素の内容がボックスのサイズを超えた場合に、どのように表示されるかを制御する重要なプロパティです。ウェブページのレイアウトやユーザーインターフェースを整えるために頻繁に使用され、スクロールバーの表示、クリッピング、要素のオーバーフローの制御に役立ちます。

overflowプロパティの基本

overflowプロパティには、visible、hidden、scroll、autoの4つの主要な値があります。

visible 
1section.overflow-visible {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: visible;
6}

visibleはデフォルトの値で、要素の内容がボックスのサイズを超えても、そのまま表示されます。超えた部分は他の要素に重なる場合がありますが、特にスクロールバーは表示されません。

特徴:

  • 内容は制限なく表示されます。
  • スクロールバーは表示されません。
hidden 
1section.overflow-hidden {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: hidden;
6}

hiddenは、要素の内容がボックスのサイズを超えた場合、超えた部分を表示しない設定です。スクロールバーも表示されず、はみ出した内容は見えなくなります。

特徴:

  • 内容が要素の境界を超えると、超えた部分は非表示になります。
  • スクロールバーは表示されません。
scroll 
1section.overflow-scroll {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: scroll;
6}

scrollを使用すると、要素の内容がボックスを超えた場合に強制的にスクロールバーが表示されます。たとえ内容がオーバーフローしていなくても、スクロールバーが常に表示されます。

特徴:

  • 内容が要素の境界内に収まっていてもスクロールバーが表示されます。
  • 水平方向や垂直方向にスクロールが可能です。
auto 
1section.overflow-auto {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: auto;
6}

autoは、コンテンツが要素のボックス内に収まる場合はスクロールバーを表示せず、コンテンツがオーバーフローした場合のみスクロールバーを表示します。

特徴:

  • コンテンツがはみ出した場合のみ、スクロールバーが表示されます。
  • 自動的にスクロール可能な領域を作成します。
overflow-xとoverflow-y 
1section.overflow-xy {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow-x: scroll;
6    overflow-y: hidden;
7}

overflowプロパティは、水平方向 (x軸)と垂直方向 (y軸)で個別に制御することも可能です。

このように、overflow-xとoverflow-yを使い分けることで、縦横のスクロールバー表示を個別に設定できます。

オーバーフローの考慮点

overflowプロパティを使用する際には、次のような点に注意する必要があります。

スクロールバーの表示によるデザインへの影響

scrollやautoを使用してスクロールバーが表示されると、ページ全体のデザインが崩れる場合があります。特に、要素が右端や下端に配置されている場合、スクロールバーによって要素が見えにくくなることがあります。

ブラウザのデフォルト動作

スクロールバーの表示方法や動作は、ブラウザによって異なる場合があります。特に、WindowsとmacOSではスクロールバーの表示スタイルに違いがあるため、デザインが意図通りに表示されないことがあります。クロスブラウザのテストを行うことが重要です。

子要素のオーバーフロー

親要素にoverflow: hiddenを設定すると、子要素が親要素のボックスを超えても、見えなくなります。これにより、ポップアップやモーダルウィンドウが正しく表示されない場合があります。

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: clip;
6}

CSSの新しい仕様では、overflow: clipという値も導入されています。これは、hiddenに似ていますが、スクロール可能にはならず、クリッピングだけを行います。

特徴:

  • コンテンツがはみ出した場合、その部分は完全に非表示になります。
  • スクロールバーは表示されません。

結論

CSSのoverflowプロパティは、ウェブデザインにおけるコンテンツの表示制御に不可欠なツールです。内容が要素のボックスを超える状況を管理し、適切なスクロールバーの表示やクリッピングを行うことで、よりユーザーにとって使いやすいインターフェースを提供できます。また、overflow-xやoverflow-yを使用することで、細かい制御も可能です。

contain

containプロパティの概要

CSSのcontainプロパティは、要素が他の要素やページ全体に与える影響を制限し、ブラウザのレンダリングプロセスを最適化します。具体的には、ある要素のスタイルやレイアウト変更が、その要素外のコンテンツに影響を与えないようにすることで、リフローや再描画の範囲を限定します。

これは、Webページのパフォーマンスに重要な意味を持ち、特に複雑なレイアウトや大量のコンテンツを扱うWebサイトにおいて効果的です。

containの値

containプロパティには、次のような値があります。

layout 
1section.contain-layout {
2    width: 300px;
3    height: 100px;
4    contain: layout;
5}

layoutは、レイアウトに関する制限を適用します。この値を使用すると、要素のサイズや位置が他の要素に影響を与えないようになります。たとえば、要素が内部でサイズ変更された場合でも、その変化が外部のレイアウトに影響を与えません。

paint 
1section.contain-paint {
2    width: 300px;
3    height: 100px;
4    contain: paint;
5}

paintは、ペイント（描画）の影響を制限します。この値を指定すると、要素内の描画が外部の要素に影響を与えなくなり、描画の再計算範囲が限定されます。

size 
1section.contain-size {
2    width: 300px;
3    height: 100px;
4    contain: size;
5}

sizeは、要素のサイズを外部に依存させないようにします。具体的には、子要素のサイズ変更が親要素のサイズに影響を与えないようにするため、レイアウトの安定性が向上します。

style 
1section.contain-style {
2    width: 300px;
3    height: 100px;
4    contain: style;
5}

styleは、要素のスタイルが外部に影響を与えないようにします。たとえば、contain: style;を指定すると、その要素のスタイル変更は他の要素に影響を与えなくなり、再計算範囲が小さくなります。

content 
1section.contain-content {
2    width: 300px;
3    height: 100px;
4    contain: content;
5}

contentは、layout、paint、size、styleを全て適用する複合的な値です。これを使うと、要素のレイアウト、描画、サイズ、スタイルが外部に全く影響を与えない状態にできます。

パフォーマンスのメリット

containプロパティを使用する最大の理由は、Webページのパフォーマンス向上です。特に、次のような場面で効果を発揮します。

  1. リフローの最適化: 要素のサイズやレイアウトが変更された場合、その影響を最小限の範囲に限定できます。これにより、不要なリフロー（レイアウトの再計算）が発生する範囲を減らし、ブラウザの負荷を軽減します。

  2. 再描画の削減: 描画範囲を制限することで、要素のスタイルやコンテンツの変更時に再描画される部分を最小限に抑えられます。

  3. コンポーネント化された開発: 各コンポーネントやモジュールが他の要素と独立して動作するため、大規模なWebアプリケーションの構築においても、各コンポーネントのパフォーマンスを高めることができます。

注意点

containプロパティを使用する際には、次の点に注意が必要です。

  1. 適用範囲の理解: containプロパティはパフォーマンス最適化に役立ちますが、すべての要素に対して適用すればよいわけではありません。適切な箇所で適切に使用することが重要です。たとえば、頻繁に変更される要素や、大規模なDOM構造の一部に対して使用すると、逆にパフォーマンスが悪化する可能性があります。

  2. ブラウザの互換性: containプロパティは比較的新しいCSS機能であり、すべてのブラウザで完全にサポートされているわけではありません。主要なブラウザ（Chrome、Firefox、Edge、Safari）ではサポートされていますが、古いバージョンのブラウザでは適用されないことがあります。

結論

CSSのcontainプロパティは、Webページやアプリケーションのパフォーマンスを最適化するための強力なツールです。特定の要素が他の要素に与える影響を制限することで、リフローや再描画のコストを削減し、全体的なレンダリングプロセスを効率化します。ただし、どの場面で適用するかをよく考え、適切に使用することが大切です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

フレックスボックスとグリッド、カラムレイアウトの比較`object-fit`と`object-position`プロパティ