この記事で学べること
- containプロパティの概念と目的
- layout、paint、size、contentの各値の違い
- レンダリングパフォーマンスの最適化方法
- strictとcontentの使い分け
- アニメーションや動的コンテンツへの適用
概要
containプロパティは、CSSで要素の「コンテインメント」（独立性）を指定するプロパティです。これは、特定の要素が他の要素やレイアウトに影響を与えないことをブラウザに伝え、再計算や再描画の範囲を限定することで、レンダリングパフォーマンスを最適化します。特に大規模なウェブページや、頻繁に更新される動的コンテンツを含むページにおいて、パフォーマンスを向上させるために非常に有効です。
containプロパティの基本構文
.element {
contain: layout paint;
}この例では、要素のレイアウトと描画に対する独立性を指定し、他の要素への影響を最小限に抑えます。
containプロパティの値
containプロパティには、以下のような値を設定することができます。それぞれ、異なるレベルのコンテインメントを提供し、要素がどの程度他のレイアウトや描画に影響を与えるかを制御します。
- layout: 要素のレイアウトが他の要素に影響を与えません。レイアウトの再計算がこの要素内部に限定されます。
- paint: 要素の描画が他の要素に影響を与えません。描画の再計算がこの要素内部に限定されます。
- size: 要素のサイズが他の要素に影響を与えません。要素のサイズ計算がこの要素内部に限定されます。
- content: 要素が完全に独立しており、レイアウト、描画、サイズに対して他の要素と影響を与え合いません。最も強力な値です。
- strict: 完全に分離された要素として扱われ、レイアウト、描画、サイズ、コンテンツの全てが他の要素に影響を与えません。
contain: strict;はcontain: layout paint size;と同等です。 - inline-size: 要素のインラインサイズ（幅）が他の要素に影響を与えません。
containの使用例
1. レイアウトの独立性を保つ（layout）
layout値は、要素のレイアウトが他の部分に影響しないようにします。これにより、ブラウザは要素の再レイアウトを行う際、他の部分に対する再計算を最小限に抑えます。
.container {
contain: layout;
}この設定により、コンテナ内で何かが変更されても、外部のレイアウトには影響を与えません。例えば、画面の一部で動的に内容を変更する場合に、他のレイアウトへの負荷を抑えることができます。
2. 描画の独立性を保つ（paint）
paint値は、要素の描画が他の要素に影響を与えないようにします。これにより、再描画の範囲が限定され、パフォーマンスが向上します。
.card {
contain: paint;
}カード要素の内容が更新された場合でも、他の部分が再描画されることを防ぎ、パフォーマンスが最適化されます。これにより、アニメーションやインタラクティブなUI要素のパフォーマンスが改善されます。
3. サイズの影響を抑える（size）
size値を使用すると、要素のサイズ変更が他のレイアウトに影響を与えないように制御できます。
.widget {
contain: size;
}これにより、widget内でサイズが変わっても、周囲の要素には影響を及ぼしません。特に、動的に内容が変わるウィジェットや広告スペースなどで便利です。
4. 完全に独立した要素（content）
content値を指定すると、レイアウト、描画、サイズの全てが独立します。これは、最も強力な独立性を提供し、要素が他の部分に全く影響を与えないようにします。
.module {
contain: content;
}これを使うと、module要素は完全に独立し、他のレイアウトや描画処理に影響を与えなくなります。
5. 厳格なコンテインメント（strict）
strict値は、全てのコンテインメントオプションを組み合わせたものです。layout、paint、sizeが全て適用され、要素が他の部分に影響を全く与えないようにします。
.sidebar {
contain: strict;
}これにより、sidebarは完全に独立したコンテナとして扱われ、外部のレイアウトや描画への影響を最小限に抑えます。
containの実用的なポイント
-
パフォーマンスの向上:
containプロパティを使用することで、ブラウザは再計算や再描画の範囲を制限し、不要なレンダリングを防ぐことができます。これにより、特に大規模なウェブアプリケーションや複雑なインタラクティブUIでパフォーマンスが大幅に改善されます。 -
アニメーションや動的コンテンツの最適化: アニメーションや動的に更新される要素がある場合、
containを使用するとそのエリアだけの更新に制限できるため、全体的な負荷を軽減できます。 -
レイアウトの安定化: 特定の要素がレイアウトの変更を引き起こす可能性がある場合、
containを適用することで、他の要素に対する影響を防ぎ、レイアウトを安定させることができます。
注意点
-
適用範囲に注意:
containを適用すると、要素が他の要素と影響を与え合わなくなるため、デザイン上意図しない結果になる場合があります。使用する際は、コンテインメントによる表示の変化を確認し、適切な場所で使用することが重要です。 -
ブラウザ対応:
containはほとんどのモダンブラウザでサポートされていますが、古いブラウザでは動作しない 可能性があります。ブラウザの対応状況を確認し、必要に応じてフォールバックを考慮してください。
まとめ
containプロパティは、CSSで要素のレンダリングパフォーマンスを最適化するために非常に便利なツールです。要素が他のレイアウトや描画に影響を与えないようにし、ブラウザの再計算や再描画の範囲を限定することで、特に複雑なレイアウトや動的コンテンツの多いページでパフォーマンスを改善します。最適なタイミングで適用することで、ウェブページのスムーズな操作性を維持しつつ、ブラウザの負荷を軽減することができます。
ポイントの振り返り
| 値 | 効果 | 使用例 |
|---|---|---|
layout | レイアウト独立 | 動的コンテンツ |
paint | 描画独立 | アニメーション |
size | サイズ独立 | ウィジェット |
content | layout + paint | 一般的な使用 |
strict | layout + paint + size | 最大の独立性 |
関連プロパティ
| プロパティ | 説明 |
|---|---|
content-visibility | コンテンツの可視性制御 |
contain-intrinsic-size | 固有サイズの指定 |
