HTMLの「小技」でWebサイトを高速化！`contain`プロパティが魔法の杖になる理由
Web制作を始めたばかりの頃、こんな経験はありませんか？
「ボタンの文字を少し変えただけなのに、なぜか画面全体がチラついたり、表示が重くなったりする……」
実はそれ、ブラウザが「この変更がどこに影響するか分からないから、念のため全部計算し直そう！」と、律儀に頑張りすぎてしまっているからなんです。
今日は、そんなブラウザの「頑張りすぎ」をそっと止めて、Webサイトを驚くほど軽快にする、ちょっと上級者向けの「魔法の杖」、`contain`プロパティをご紹介します。
—
そもそも、ブラウザはどうやって画面を描いているの？
例え話をしましょう。あなたは大きなショッピングモールの案内係です。
ある日、一階にある「小さなカフェ」の看板を書き換えることになりました。
本来なら「カフェの看板だけ」を直せばいいはずですよね。でも、もしモール全体が「どこか一箇所でも変わったら、全店舗の看板をチェックし直す！」という厳しいルールだったらどうでしょう？ たった一文字直すためだけに、何百店舗も確認していたら、お客さんは待ちぼうけになってしまいます。
ブラウザも同じです。``や``のような小さな要素の中身が変わるたび、ブラウザは「この変更は、ページのレイアウト全体に影響するかも？」と、ページ全体を再計算（リフロー）してしまいます。これがWebサイトが重くなる原因の一つです。
—
そこで登場！「contain」という境界線
`contain`プロパティは、ブラウザに対してこう伝えます。
「この要素の中身は独立しているから、外側に影響しないよ。だから、外側のことは気にしなくていいよ！」
つまり、カフェの入り口に「ここから先はカフェ専用エリア」という境界線を引くイメージです。これによって、カフェの中で何が起きても、モール全体の確認作業はストップされます。ブラウザは「お、ここは無視していいんだね！」と、他の作業に集中できるわけです。
どうやって使うの？
`contain`プロパティにはいくつか種類がありますが、まずは以下の2つを覚えておけばバッチリです。
- `contain: layout;`：中身のレイアウトが外側に影響しないことを伝えます。
- `contain: style;`：中身のスタイル（色や文字など）が外側に影響しないことを伝えます。
—
実践コード：ここを抑えれば大丈夫！
例えば、リアルタイムで数字が更新されるタイマーや、頻繁に中身が変わる``タグに使ってみましょう。
/ インライン要素を囲むためのクラスを作ります /
.independent-box {
/ ここで「この中身は独立しているよ！」と宣言します /
contain: layout style;
/ 見た目のための設定 /
display: inline-block;
padding: 5px;
border: 1px solid #ccc;
}
今のカウントは：
0
です。
—
注意点：魔法の使いすぎに注意！
「じゃあ、全部の要素に`contain`を付ければ最強なのでは？」と思うかもしれませんが、ちょっと待ってください。
実は、この境界線を引くというのは、ブラウザに「ここから先は見るな！」と命令することでもあります。もし、中身がはみ出すデザインなのに`contain`を付けてしまうと、表示が途中で切れてしまうなどのトラブルが起きることも。
- 「中身が独立している」と確信が持てる場所（ウィジェットやバッジ、タイマーなど）に使う。
- 「なんとなく重い気がする」という場所にピンポイントで試してみる。
これが、現場での上手な付き合い方です。
—
まとめ：ブラウザと仲良くなろう
`contain`プロパティは、決して難しい魔法ではありません。ブラウザという「一生懸命な作業員」に、「ここは大丈夫だよ」と声をかけてあげるための、ちょっとした気遣いのようなものです。
最初は難しく感じるかもしれませんが、まずは小さな``タグ一つから試してみてください。「あれ？ 少し動きが滑らかになったかも？」という手応えを感じられたら、あなたはもう立派なパフォーマンス・チューニングの第一歩を踏み出した証拠です！
Web開発の現場は、こうした小さな工夫の積み重ねでできています。焦らず、楽しみながら一つずつ試してみてくださいね。応援しています！
コメント