概要

CSSのcontain-intrinsic-sizeプロパティは、コンテンツが遅延ロードされる際に仮想的なサイズを指定し、ページのレイアウトが安定するようにするために使用されます。特に、画像やビデオなどのコンテンツが遅れて読み込まれる場合、このプロパティを利用することで、その要素が実際に表示されるまでの間、指定したサイズで仮想的にスペースを確保します。これにより、コンテンツのロードが完了する前でも、レイアウトのシフト（ジャンプ）を防ぎ、ユーザーの視覚的な体験を向上させることができます。

contain-intrinsic-sizeの基本的な使い方

contain-intrinsic-sizeプロパティは、主にcontain: size;と組み合わせて使用されます。このプロパティは、要素のコンテンツが読み込まれる前に仮想的なサイズを指定することで、コンテンツの実際のサイズが判明するまでの間、レイアウトを維持する役割を果たします。

.lazy-loaded {
    contain: size; /* コンテナのサイズを管理 */
    contain-intrinsic-size: 300px 200px; /* 仮想的な幅と高さを設定 */
}

この例では、.lazy-loadedクラスが適用された要素は、読み込みが完了するまで300pxの幅と200pxの高さで仮想的にレンダリングされます。

contain-intrinsic-sizeの値

contain-intrinsic-sizeには、以下のような値を指定できます。これらの値を設定することで、要素が表示される前に仮想的なサイズを定義できます。

px単位の幅と高さ

幅と高さをピクセル単位で指定します。この設定により、指定したサイズで仮想的に要素がレンダリングされ、後から実際のコンテンツサイズが読み込まれた際にスムーズに置き換わります。

.example {
    contain: size;
    contain-intrinsic-size: 400px 250px; /* 仮想的な幅400px、高さ250pxを設定 */
}

auto

autoは、特定の仮想サイズを指定せず、ブラウザが自動的にサイズを決定することを示します。この設定は、要素が特定のサイズを持たない場合に適用されますが、レイアウトの安定性は保証されません。

.example-auto {
    contain: size;
    contain-intrinsic-size: auto;
}

使用例

遅延読み込みの画像に仮想サイズを設定する

遅延読み込みされる画像に対して仮想的なサイズを設定し、ページのレイアウトシフトを防ぐ例です。

<div class="image-container">
    <img class="lazy-loaded" src="path/to/image.jpg" alt="遅延読み込み画像">
</div>
<style>
.image-container {
    width: 100%;
    max-width: 600px;
    margin: auto;
}
.lazy-loaded {
    contain: size;
    contain-intrinsic-size: 600px 400px; /* 画像の仮想サイズを指定 */
}
</style>

この例では、遅延読み込みされる画像が実際にロードされるまで、600pxの幅と400pxの高さで仮想的にスペースが確保されるため、他のコンテンツがジャンプすることを防げます。

動的コンテンツのレイアウトシフトを防ぐ

以下の例では、動的に生成されるコンテンツに仮想サイズを設定し、初期レンダリング時の不安定なレイアウトシフトを防ぎます。

<div class="dynamic-content">
    <!-- コンテンツが動的に挿入されます -->
</div>
<style>
.dynamic-content {
    contain: size;
    contain-intrinsic-size: 500px 300px; /* 仮想サイズでレイアウトを固定 */
    border: 1px solid #ccc;
}
</style>

この設定により、動的なコンテンツが表示されるまで、仮想的に500pxの幅と300pxの高さが確保されます。

注意点

• contain-intrinsic-sizeは、contain: size;と併用して使用する必要があります。この設定がないと、仮想サイズが適用されないため注意してください。
• 仮想サイズを適切に設定しないと、レイアウトが崩れる可能性があります。コンテンツの実際のサイズに近い値を指定することが重要です。
• このプロパティは、ページのパフォーマンス向上に寄与しますが、ブラウザのサポート状況を確認することが推奨されます。一部の古いブラウザでは、完全にサポートされていない可能性があります。

まとめ

contain-intrinsic-sizeプロパティは、ページのレイアウトを安定させ、コンテンツの遅延ロード時に発生するレイアウトシフトを防ぐための強力なツールです。このプロパティを活用することで、視覚的に安定したウェブページを提供でき、ユーザー体験を大幅に向上させることができます。特に動的なコンテンツや遅延読み込みが多いページで有効ですので、ぜひ活用してみてください。