こんにちは。Webブラウザという、魔法のようでいて実は非常に律儀な「職人さん」たちの世界へようこそ。
Web制作を始めたばかりの頃、画面がガクッと動いて広告や画像が後から飛び込んでくる「レイアウトシフト」に悩まされたことはありませんか？ まるで、混雑したカフェで注文を待っていたら、隣の人の荷物が急に広がって自分のコーヒーがこぼれそうになる……あの焦燥感に近いものですよね。
今日は、そんなブラウザの「ドタバタ劇」をスマートに解決する、ちょっと玄人好みな技術`contain-intrinsic-size`についてお話しします。
—
ブラウザは「見切り発車」が苦手？
まず、ブラウザがどうやって画面を描いているか想像してみてください。ブラウザは、HTMLを読み込むと、そこにある要素を一つひとつ確認して、「君はどのくらいの大きさかな？」「君は隣に誰がいるかな？」と計算しながら、パズルのように画面を組み立てていきます。
問題は、「中身がまだ読み込まれていない要素」です。
例えば、Webフォントや大きな画像など、読み込みに時間がかかるもの。ブラウザは最初、それらが「0px × 0px」だと勘違いして画面を組み立ててしまいます。そして読み込みが完了した瞬間に、「おっと、実はこんなに大きかったんだ！」と慌てて場所を広げる……これが、画面がガクッと動くレイアウトシフトの正体です。
そこで登場するのが「contain-intrinsic-size」
そんなブラウザの慌てん坊を落ち着かせるのが、`contain-intrinsic-size` というプロパティです。これは一言で言うと、「中身が届く前から、場所だけはしっかり確保しておくための『予約席』」です。
どういう仕組みなの？
CSSの `content-visibility: auto;` というプロパティとセットで使うのが一般的です。これは、「画面の外にあるものは、見えるところに来るまで計算をサボっていいよ」という命令です。
でも、ただサボらせるとブラウザは「広さがわからないから0pxにしておこう」と判断してしまい、スクロールバーがガタついたりしてしまいます。そこで、`contain-intrinsic-size` の出番です。
「まだ中身はないけど、だいたい『高さは500px』くらいになるはずだから、とりあえずそこを空けておいてね！」と、事前にサイズを教えてあげるのです。
—
実践コード：ブラウザに「予習」をさせよう
さあ、実際に試してみましょう。難しく考える必要はありません。ただ「予約席のサイズ」を指定するだけです。
.lazy-container {
/ 1. まず、画面外では計算をサボらせる設定 /
content-visibility: auto;
/ 2. 「中身が来るまでは、とりあえずこの高さを確保してね！」という予約 /
/ ここでは500pxと指定していますが、実際のデザインに合わせて調整してください /
contain-intrinsic-size: 500px;
}
たったこれだけ。これだけで、ブラウザは「なるほど、500px分の場所を空けておけばいいんだね」と理解し、読み込み完了時もレイアウトを動かさずに、スムーズに中身を差し替えてくれます。
—
初学者がつまずきやすいポイントへのフォロー
「でも、正確なサイズがわからないときはどうすればいいの？」
そんな不安が聞こえてきそうです。大丈夫、完璧である必要はありません。
- 「だいたいの目安」でOK： 完全に正確なピクセル数でなくても、何もないよりはずっとマシです。「スマホの縦幅くらいかな？」「このバナーなら200pxくらいかな？」という感覚で設定するだけで、レイアウトシフトの幅は劇的に減ります。
- レイアウト崩れを恐れないで： もし予約したサイズと中身のサイズが違っても、読み込みが終わればブラウザは自動で「あ、思ってたよりちょっと大きかったね」と修正してくれます。つまり、Webサイトが壊れることはありません。
最後に：ブラウザと仲良くするために
Web制作は、ブラウザという優秀だけど少し不器用な相棒と一緒に、快適な空間を作り上げる共同作業です。
`contain-intrinsic-size` は、そんな相棒に「ここはこういうサイズだよ」と優しくヒントを与えてあげるコミュニケーションツールのようなもの。これを使いこなせるようになると、あなたの作るWebサイトは驚くほど滑らかで、ユーザーにとってストレスのない心地よい場所になります。
最初はピンとこないかもしれませんが、まずは一つ、長いページの下の方にある画像や広告にこの魔法をかけてみてください。ブラウザが「ありがとう！」と言って、スイスイとページを表示してくれるはずですよ。
それでは、素敵なコーディングライフを！ 何かあればいつでも相談してくださいね。
コメント