こんにちは。Webブラウザという、魔法のようでいて実は非常に正直で律儀な「箱」の世界へようこそ。
Web制作を始めたばかりの頃、ブラウザが画面をどうやって描いているかなんて考えもしませんよね。でも、たまに「Webページを開いた瞬間に、ボタンがガクッと下にズレて、押そうと思った場所を押し間違えちゃった！」なんて経験はありませんか？
あれ、実はブラウザが一生懸命頑張った結果、逆に空回りして起きている悲劇なんです。今日は、その「ガクッ」の正体——レイアウトシフト（CLS）について、現場の知見を交えて紐解いていきましょう。
—
ブラウザは「几帳面な画家」である
まず、ブラウザがWebページを描くときの様子を想像してみてください。ブラウザは、非常に几帳面な画家です。
1. HTMLを受け取る（下書き）: ページ全体の骨格を確認します。
2. CSSを当てる（色付け・配置）: 「ここは赤く」「ここは右側に」と設計図を読み込みます。
3. DOM/CSSOMツリーを作る（設計図の確定）: 「何がどこにあるか」の地図を作ります。
4. Layout（配置計算）: 「よし、この要素はここから何ピクセル、あっちの要素はここから…」と、定規で測るように計算します。
この「Layout（配置計算）」が、実は一番の難所なんです。
—
なぜ「ガクッ」とズレるのか？（レイアウトシフトの正体）
もしあなたが、完成した絵画の真ん中に、あとからいきなり「大きなポスター」を貼り付けたらどうなりますか？ もともとあった絵は、下に押しやられてしまいますよね。
ブラウザも同じです。特に多い原因がこの2つ。
1. 画像のサイズ未指定（高さがわからない）
画像が読み込まれる前、ブラウザは「ここに画像が来ることは知ってるけど、どれくらいの大きさかはまだ知らない」という状態になります。
画像が読み込まれた瞬間、「あ、意外と縦長だった！」とブラウザが気づき、急いで後続の要素を下に押し下げるのです。これが、画面がズレる最大の要因です。
2. JavaScriptによる後出しのDOM挿入
「あとから広告を読み込む」「おすすめ記事を追加する」といった処理も、画家が描いている最中に別のキャンバスを割り込ませるようなもの。ブラウザは一度決めた配置を、泣く泣くゼロから計算し直す羽目になります。
—
対策は「場所取り」をしておくこと
この「ガクッ」を防ぐための魔法の言葉は「あらかじめ場所を確保しておくこと」です。
昔の映画館の座席指定をイメージしてください。座る場所が決まっていれば、後から人が来ても席を移動する必要はありませんよね。ブラウザにも「この画像には、この分のスペースを空けておいてね」と伝えてあげるだけでいいんです。
実践：CSSで場所を予約する
現在は `aspect-ratio` という非常に便利なプロパティがあります。画像が読み込まれる前から、ブラウザに「この画像は 16:9 の比率だよ」と教えてあげることで、最初からその高さ分だけスペースを確保してくれます。
—
最後に：完璧主義にならなくて大丈夫
Web開発の現場では、すべてのレイアウトシフトをゼロにすることは非常に難しい技術的挑戦です。広告枠や動的なコンテンツが溢れる現代では、多少のズレは避けられないこともあります。
でも、「ブラウザがどうやって計算しているか」という仕組みを知っていることは、大きな武器になります。「なぜズレるのか」がわかれば、パニックにならずに「じゃあ、高さの予約を入れようか」という冷静な解決策が浮かんでくるはずですから。
ブラウザと仲良くするために、まずは「画像の場所取り」から始めてみてください。きっと、あなたの作るページは今よりもっと、ユーザーにとって優しくて読みやすいものになるはずです。
もし詰まったら、いつでもまた聞きに来てくださいね。大丈夫、一歩ずつやっていきましょう！
コメント