やあ、ようこそ。ブラウザの裏側を覗き込む冒険へ。
フロントエンドの世界に飛び込んで、「Webページってどうやって画面に映るんだろう？」と疑問に思ったことはないかな？今日は、そんな君のWeb制作ライフを劇的に変えてくれる、ちょっと魔法みたいなCSSプロパティ`content-visibility`について話をしよう。
難しい理論武装は置いておいて、まずは私たちの「身近な体験」から紐解いていこうか。
—
巨大な図書館と「魔法の目」
想像してみてほしい。君は今、何万冊もの本が並ぶ巨大な図書館の司書さんだ。
訪れたお客さんに「あの本どこにある？」と聞かれたとき、君はどうするかな？
全ての棚を最初から最後まで全力で整理整頓して、全てのタイトルを暗記してから案内する？ そんなことをしていたら、お客さんは待たされて帰ってしまうよね。
実は、Webブラウザも全く同じ。
ページを開いた瞬間、ブラウザは「画面の端から端まで、すべての要素を緻密に計算して描画しよう！」と頑張りすぎる傾向があるんだ。これを「レンダリング」と呼ぶけれど、ページが重いとブラウザはパンクしてしまう。
そこで登場するのが、`content-visibility`という魔法のプロパティだ。これはブラウザに対してこう告げるんだ。
「今、画面に見えていない場所は、とりあえず無視していいよ！」
—
`content-visibility: auto` で「必要なときだけ」動く
このプロパティを要素に設定すると、ブラウザは「今、ユーザーの目に映っているかな？」と確認するようになる。
もし映っていなければ、その中身の構築（解析や配置の計算）をサボってくれるんだ。これ、最高に効率的だと思わないか？
使い方はとてもシンプル
例えば、ブログの長い記事や、商品がずらりと並ぶ一覧ページなどで使ってみよう。
.product-card {
/ これだけで、画面外にあるカードの計算をブラウザがサボってくれる /
content-visibility: auto;
/ 後述するプレースホルダーのサイズ指定 /
contain-intrinsic-size: 0 500px;
}
—
注意点：スクロールバーが「暴走」する理由
ここで一つ、初心者が必ずと言っていいほどつまずく罠がある。
「サボる」ということは、ブラウザは「その要素が本当はどれくらいの大きさなのか」を知らない状態になるんだ。
すると、スクロールバーが「おいおい、ページ全体の長さがわかんないぞ！？」とパニックを起こして、スクロールするたびにカクカクと伸縮してしまう。
これを防ぐのが `contain-intrinsic-size` だ。
これは、「中身は後で描くけど、とりあえずこのくらいの場所を空けておいてね！」という「仮の箱」のサイズを指定するものなんだ。
- 例え話：お買い物で届く段ボール箱。中身を見るまでは重さが分からないけれど、「だいたいこのくらいの大きさの箱が届く」と分かっていれば、玄関に置く場所を確保できるよね？ それと同じだよ。
—
実践コード：つまずきポイントを回避する
以下のコードを自分のエディタにコピーしてみて。ポイントは、中身が描画される前の「箱の大きさ」をちゃんと教えてあげることだ。
/ 画面外では描画をスキップする設定 /
.my-card {
content-visibility: auto;
/
中身が読み込まれる前の「仮の高さ」を指定する。
これが無いとスクロールバーがガタつくので、
大体でいいから指定してあげることが優しさだよ。
/
contain-intrinsic-size: 0 300px;
/
もし中身の高さが変動するなら、
‘auto 300px’ と書くことで、ブラウザが
「描画した時の高さ」を自動で覚えてくれるようになるよ。
/
contain-intrinsic-size: auto 300px;
}
—
最後に：完璧を目指さなくていい
Webの世界は広い。今回紹介した`content-visibility`は、特に「コンテンツが長すぎて、初期ロードが遅い」と悩んでいるときに劇薬のように効くテクニックだ。
でも、覚えておいてほしい。最初から全てを最適化しようとすると、コードは複雑になりすぎる。まずは「ページが重いな」と感じたとき、一番下にあるセクションや、メインコンテンツ以外の部分にポツンと試してみる。それくらいの気軽さで十分なんだ。
君が書くコードが、誰かのブラウザを少しだけ軽くして、快適な体験を届ける……。それって、すごく素敵なことだと思わない？
また何か困ったことがあったら、いつでも聞いてくれ。一緒に最高にクールなWebを作っていこう。
コメント