皆さん、こんにちは！Webサイトの表舞台と裏舞台を知り尽くした、伝説のチーフアーキテクトです。

Webサイトを見ていると、時々「あれ？なんか表示がもっさりするな」「スクロールがカクカクするな」なんて感じること、ありませんか？特に、情報がたくさん並んだページや、アニメーションが動いているページだと、顕著に感じやすいかもしれません。

あれって、実はあなたのブラウザが「頑張りすぎている」からかもしれません。そして今日お話しするCSSの魔法、`contain`プロパティは、その頑張り屋さんのブラウザに「ちょっと休憩していいよ、ここだけ見てれば大丈夫だよ」と優しく教えてあげる、とっても賢いおまじないなんです。

Web制作や開発を始めたばかりの皆さんにとって、ブラウザが裏でどんなお仕事をしているのかって、ちょっと難しく感じるかもしれませんね。でも大丈夫！身近な例え話と、とびっきりの知見を交えて、優しく丁寧に解説していきますから、安心してついてきてください。

—

Webブラウザのレンダリングって、どんなお仕事？

まずは、`contain`プロパティの前に、ブラウザがWebページを表示するまでの「お仕事」をざっくりと見ていきましょう。例えるなら、豪華な料理を作るシェフのようなものですね。

ブラウザがページを表示するまでには、大きく分けて3つのステップがあります。

1. リフロー（配置の計算）

「よし、この食材はどこに置こうかな？」

これは、Webページの要素（文字、画像、ボタンなど）が「どこに」「どんな大きさで」配置されるかを計算するお仕事です。

想像してみてください。あなたは今、たくさんのおかずを詰めるためのお弁当箱を前にしています。鶏肉の唐揚げ、卵焼き、ブロッコリー…これらをどう配置したら、きれいに、そして収まりよく詰められるかを考えるのが「リフロー」です。

もし、途中で「あ、やっぱりここにミニトマトも入れたい！」となると、他の全てのおかずの位置や大きさをもう一度計算し直す必要がありますよね？ブラウザも同じで、どこかの要素の大きさや位置が変わると、ページ全体の要素の配置を再計算することがあるんです。これを「リフローの再発生」なんて呼んだりします。これが、パフォーマンスを低下させる大きな原因の一つになることがあります。

2. リペイント（色の塗り直し）

「よし、お弁当箱に詰め終わったから、彩り良く盛り付けよう！」

リフローで要素の配置が決まったら、次はその要素を「どんな見た目にするか」、つまり色や影、テキストの色などを画面に「描画」するお仕事です。

お弁当の例で言えば、唐揚げにはレモンを添えて、卵焼きにはパセリを散らして…といった具合に、見た目を美しく仕上げる作業ですね。

もし、お弁当のおかずの色を変えたくなったら？唐揚げを照り焼きチキンに変えたら？その部分だけ、もう一度色を塗り直す必要があります。これも「リペイントの再発生」と呼ばれ、これまたブラウザが頑張るポイントなんです。

3. コンポジット合成（最終的な重ね合わせ）

「さあ、お弁当のフタを閉めて、完成だ！」

リフローで配置が決まり、リペイントで見た目が整ったら、最後にそれらを「重ね合わせて」、あなたの画面に表示するお仕事です。ブラウザは、要素を透明なシート（レイヤー）に描き、それらを重ね合わせて最終的なページを作り出します。

アニメのセル画を想像すると分かりやすいかもしれません。背景のセル、キャラクターのセル、エフェクトのセル…それぞれ別々に描かれたものを重ね合わせて、一枚の絵を作り出しますよね。ブラウザも、たくさんのレイヤーを重ねて、あなたが見ているWebページを完成させています。

—

`contain`プロパティって、何をしてくれるの？

「お隣さんとは関係ないよ！」宣言

さて、いよいよ本題の`contain`プロパティです。ここまでで、ブラウザが「リフロー」や「リペイント」といったお仕事を頑張ってくれていることが分かりましたね。

でも、この頑張り屋さんなブラウザ、時々「頑張りすぎ」ちゃうことがあるんです。例えば、ページのほんの一部、小さなコンポーネントの色が変わっただけなのに、もしその変更がページ全体に影響する可能性があると判断すると、ブラウザはページ全体の再計算や再描画を試みてしまうことがあります。

これは、お弁当の例で言うと、ミニトマトの色が変わっただけで、「もしかしたら他のおかずの位置も変わるかも？」と考えて、全部のおかずを一旦お弁当箱から出して、また最初から詰め直し、盛り付け直すようなものです。ちょっと大げさですよね？

そこで登場するのが、`contain`プロパティなんです。これはブラウザに対して、「この要素の中での変更は、この要素の中だけで完結するから、外のことは気にしなくていいよ！」と教えてあげる、非常に強力なCSSプロパティです。

例えるなら、マンションの部屋のようなものです。あなたの部屋の壁紙を張り替えても、隣の部屋や廊下の壁紙には影響しませんよね？あるいは、お店の中の商品棚のようなイメージもできます。ある棚の商品を入れ替えても、お店全体のレイアウトや他の棚の商品配置には影響しません。

`contain`プロパティは、特定の要素を「独立した箱」としてブラウザに認識させ、その箱の中での変更が、箱の外に影響を与えないようにすることで、ブラウザの不要な再計算や再描画を防ぎ、結果的にページの表示速度やスクロールの滑らかさを改善してくれるんです。

—

`contain`プロパティの種類と、その効果

`contain`プロパティには、どんな影響を「独立」させるかによっていくつかのキーワードがあります。これらを組み合わせて使うこともできますし、便利なショートハンドもあります。

`contain: layout;`

「レイアウトの計算はうちの中だけで完結します！」

これは、`contain`の最も強力なモードの一つです。このプロパティを適用された要素は、その子要素のレイアウトがどう変わろうと、親要素や兄弟要素のレイアウトには影響しないことをブラウザに伝えます。
つまり、「この部屋の模様替えは、隣の部屋には何の影響も与えないよ！」という宣言です。ブラウザは、その部屋の外側にある要素のレイアウト計算をスキップできるようになるため、リフローの範囲が大きく限定されます。

`contain: paint;`

「描画（ペイント）の範囲はうちの中だけです！」

このプロパティは、要素の内容がその要素の境界ボックス（見た目の範囲）の外側にはみ出して描画されないことをブラウザに伝えます。
「この部屋の壁塗り、はみ出して隣の部屋を汚したりしないから、安心してね！」というイメージです。
これにより、ブラウザは、ある要素が画面外に出ている場合や、他の要素に隠れている場合に、その要素の描画をスキップできるようになります。これは、特にスクロール可能なリストなどで大きな効果を発揮します。

`contain: size;`

「うちのサイズは外からは変わらないよ！」

これは、要素のサイズが、その子要素の内容によって変化しないことをブラウザに伝えます。
「この頑丈な箱は、中身がどれだけ増えても、箱自体の大きさは変わらないからね！」という宣言です。
この値を使うと、ブラウザはその要素のサイズを計算する際に、子要素の内容を考慮する必要がなくなるため、リフローの効率が上がります。ただし、子要素がはみ出す可能性があるので、`overflow`プロパティとの組み合わせを考慮することが多いです。

`contain: style;`

「スタイルはうちの中だけだね！」

これは、CSSカウンターやカスタムプロパティなど、一部のスタイルがその要素のサブツリー内で閉じていることをブラウザに伝えます。
「このお店の内装ルールは、このお店の中だけで適用されるものだから、外のお店には影響しないよ！」といった感じです。これは比較的ニッチなユースケースですが、大規模なアプリケーションでCSSの適用範囲を厳密に管理したい場合に役立ちます。

`contain: content;`

（`layout` + `paint`のショートハンド）

よく使う組み合わせがこれです！`contain: content;`と書くと、`contain: layout paint;`と同じ効果が得られます。
「この箱の中のレイアウトも描画も、箱の外には影響しないから！」という、とても便利なショートハンドですね。パフォーマンス改善の多くで、この`content`が活躍します。

`contain: strict;`

（`layout` + `paint` + `size` + `style`のショートハンド）

これは、`contain`が提供する最も強力な分離モードです。`contain: strict;`と書くと、`contain: layout paint size style;`と同じ効果が得られます。
「この部屋は完全に独立してるから、中のことは全部自分たちでやるし、外に一切影響しないよ！」という、究極の独立宣言です。
非常に強力ですが、`size`が含まれるため、要素のサイズが子要素の内容に依存して自動調整されなくなる点には注意が必要です。場合によっては、コンテンツがはみ出したり、スクロールバーがおかしくなったりすることがありますので、慎重に使う必要があります。

—

`contain`プロパティを「使ってみよう！」

では、実際に`contain`プロパティがどんな場面で役立つのか、シンプルなコード例で見てみましょう。
Webサイトでよくある「記事カード」がずらっと並んだレイアウトを想像してください。

HTMLの準備

containプロパティでパフォーマンスを改善！

CSSの準備 (`style.css`)

body {
font-family: sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}

h1, h2, h3 {
color: #2c3e50;
}

.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
}

.card-list {
display: grid; / グリッドレイアウトでカードを並べる /
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); / レスポンシブな配置 /
gap: 20px; / カード間のスペース /
margin-bottom: 40px;
border: 2px dashed #ccc;
padding: 20px;
border-radius: 8px;
}

.card {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: transform 0.2s ease-in-out;
}

.card:hover {
transform: translateY(-3px); / ホバーで少し浮き上がるアニメーション /
}

.card h3 {
margin-top: 0;
color: #3498db;
}

.card p {
font-size: 0.9em;
color: #666;
}

.card button {
background-color: #3498db;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
margin-top: 10px;
}

.card button:hover {
background-color: #2980b9;
}

/ containプロパティを適用する要素 /
.contain-item {
/ この1行がポイント！ /
/ この要素は、レイアウトとペイントに関して、親や兄弟要素に影響を与えないようになります /
contain: content;
/ contain: layout paint; と同じ意味です /

/ デモ用に背景色を変えて、視覚的に分かりやすくします /
background-color: #e6f7ff;
border-color: #aaddff;
}

hr {
border: none;
border-top: 1px solid #eee;
margin: 40px 0;
}

どうやって効果を確かめるの？

このコードを保存してブラウザで開いてみてください。見た目上は、ほとんど違いがないように見えるかもしれません。しかし、ブラウザの裏側では大きな違いが生まれています。

1. ブラウザの開発者ツールを開く: Google Chromeの場合、F12キーを押すか、右クリックして「検証」を選びます。
2. 「Rendering」タブを探す: 開発者ツールの上部にある「…」（その他ツール）から「Rendering」を選びます。（Chromeのバージョンによっては「More tools」→「Rendering」かもしれません）
3. 「Paint flashing」にチェックを入れる: これにチェックを入れると、画面上でリペイントが発生した領域が緑色にハイライト表示されます。
4. 「Layout Shift Regions」にチェックを入れる: これにチェックを入れると、レイアウトが変更された領域が青色にハイライト表示されます。

これでページを眺めてみてください。3秒後にJavaScriptでカードの内容が変更されると、`contain: content;`を適用していないリストでは、変更されたカードだけでなく、その周りの要素も緑や青に光る範囲が広くなることがあります。

一方、`contain: content;`を適用したリストでは、変更されたカードの領域だけが緑や青に光り、他の要素への影響が少なくなるのが視覚的に分かるはずです。これが、ブラウザが「あ、ここだけ見ればいいんだな」と賢く判断し、無駄な再計算・再描画をサボってくれている証拠なんです。

—

どんな時に使うと効果的なの？

`contain`プロパティは、特に次のような場面で劇的なパフォーマンス改善をもたらす可能性があります。

• 大量の要素が並ぶリストやフィード: ソーシャルメディアのタイムラインや、ECサイトの商品リストなど、スクロールすると次々と新しいコンテンツが読み込まれるような場所。それぞれのカードやアイテムに`contain: content;`を適用することで、個々の要素の更新がページ全体のリフロー・リペイントに影響しにくくなります。
• モーダルウィンドウやポップアップ: 画面上に一時的に表示される要素。これらに`contain`を適用することで、表示・非表示の切り替え時に、背景のコンテンツへの不要な再計算を防ぐことができます。
• ウィジェットや広告など、独立性の高いコンポーネント: ページ内に埋め込まれた、他のコンテンツとはあまり関係なく動作するような部分。これらに`contain`を適用することで、そのコンポーネント内での更新が、メインコンテンツのレンダリングに影響するのを防げます。

使う上での注意点

ただし、魔法の杖のように何でもかんでも`contain`を適用すれば良い、というわけではありません。

• `contain: size;`の利用: 特に`contain: strict;`を使う場合や、明示的に`contain: size;`を指定する場合、要素のサイズが子要素の内容に依存して自動調整されなくなります。そのため、コンテンツがはみ出したり、スクロールバーがおかしくなったりすることがあります。この場合は、明示的に幅や高さを指定したり、`overflow: auto;`などと組み合わせたりする必要が出てくるでしょう。
• 意図しない表示の崩れ: ごく稀にですが、`contain`を適用することで、要素が予期しない形で描画されたり、はみ出しが発生したりするケースも報告されています。これは、ブラウザが「この要素は独立している」と判断した結果、本来行うべきだった計算をスキップしてしまうためです。適用する際は、必ず開発者ツールで見た目やパフォーマンスの変化を確認しましょう。

基本的には、`contain: content;`から試してみて、もしさらにパフォーマンスを追求したい場合に、より強力な`layout`や`strict`を検討するのがおすすめです。

—

まとめ：ブラウザに「賢くサボっていいよ」と伝えるおまじない

今日は、Webブラウザのレンダリングの仕組みと、そのパフォーマンスを劇的に改善する可能性を秘めた`contain`プロパティについてお話ししました。

`contain`プロパティは、ブラウザに「この部分は独立した箱だから、この中での変更は外に影響しないよ。だから、外の計算はサボっていいよ」と優しく教えてあげる、とっても賢いおまじないです。

これまでブラウザは、ページ上のどんな小さな変化も「もしかしたら全体に影響するかも？」と心配して、真面目に全部を再計算・再描画しようとしていました。でも、`contain`を使うことで、私たちはブラウザに「大丈夫、そんなに頑張らなくていいんだよ」と伝えてあげられるようになったわけです。

Webサイトのパフォーマンスは、ユーザー体験に直結します。表示が速く、サクサク動くサイトは、それだけでユーザーに良い印象を与えますし、SEOの観点からも重要視されています。

この記事を読んでくださった皆さんが、ブラウザの仕組みの奥深さに少しでも触れ、そして`contain`プロパティという強力なツールを手に入れたことで、より快適なWeb体験を作り出す一助になれば、これほど嬉しいことはありません。

闇雲に使うのではなく、「どんな時に、どの`contain`を使うと最も効果的か」を考えながら試してみてください。きっと、あなたのWebサイトが一段と輝きを増すはずです。

これからも、一緒にWebの面白い世界を探求していきましょうね！
何か困ったことがあったら、いつでもまたここを訪れてください。大丈夫、一歩一歩、確実に進んでいきましょう！