こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web制作をしていると「思ったよりページの動作が重い」「ちょっとしたUIアニメーションがカクつく」といった悩みに直面することがあります。
その原因の一つが ブラウザのレンダリング処理!
実はCSSには、この処理を効率化して表示をスムーズにするためのプロパティが用意されています。
それが contain プロパティ。
中でも「contain: layout;」は、レイアウトの影響範囲を限定することでパフォーマンス改善に効果を発揮します。
containプロパティとは？
contain は「この要素は外側に影響を与えませんよ」とブラウザに伝えるためのヒントを与えるCSSプロパティです。レンダリングの計算範囲を小さくできるため、再描画やリフローを効率化できます。
使い方はシンプルで、以下のように指定します。
.box { contain: layout; }
layoutを指定するとどうなる？
contain: layout; を指定すると、その要素内で起きたレイアウト変更（例えばサイズ変更）が 外側に伝播しなくなります。
つまり「この箱の中は独立している」とみなされるので、外の要素に余計な影響を及ぼさないようになります。
- サイズ変更やDOM操作での再計算範囲が限定される
- リフロー（レイアウト再計算）が高速化される
- 結果として、スクロールやアニメーションが滑らかになる
実際のコード例
例えば、以下のようなカードUIがあったとします。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
CSSに contain: layout; を追加すると…
このカードの内部でレイアウトが変わっても、外側のレイアウト全体に無駄な再計算が波及しなくなります。
他のcontain値との違い？
contain には layout 以外にも以下の値があります。
- size：要素のサイズが固定化される（外に影響しない）
- paint：要素の描画を独立させる
- style：フォントやカウンタなどのスタイル作用範囲を限定
- content：上記の複数をまとめて指定できるショートカット
注意点：独立性ゆえの制約
便利な contain: layout; ですが、独立性を持たせる分、いくつかの制約もあります。
- 外側の要素との自動的な高さ調整が効かなくなる場合がある
- flexboxやgrid内ではレイアウト挙動に影響を与えることもある
- 無闇に使うと「思ったようにデザインが効かない」ケースが出る
ですので、「複雑なUIブロック」や「独立して動作するコンポーネント」に対してピンポイントで適用するのがベストです。
まとめ
contain: layout; を使うと、要素を「レイアウト的に独立した箱」として扱えるようになり、不要な再計算を防いでレンダリングの最適化が可能になります。
特に効果が出やすいのは
- SPAやPWAのように動的なUIが多いサイト
- スクロール量が多い記事ページ
- リッチなカードUIやコンポーネントを多用するレイアウト
「見た目は変わらないけれど、内部的に軽くなる」そんな地味だけど確実に効くテクニックです！
satokotadesignキャンペーン実施中！
