【CSS Modules】contain-intrinsic-size省略形プロパティの使い方

contain-intrinsic-sizeプロパティは、CSSコンテインメントが適用された要素に対して、その要素の自然な（内部的な）サイズを事前に定義するためのプロパティです。

このプロパティは、要素のコンテンツがまだロードされていない、またはそのサイズが決定されていない場合に、ブラウザが占めるべき初期の領域（幅と高さ）を明示的に指定します。これにより、コンテンツの読み込みや動的な変更によって発生するレイアウトシフト（ページの予期せぬ位置ずれ）を防ぎ、ユーザー体験の安定性向上に貢献します。特に、Webページのロードパフォーマンス指標であるCumulative Layout Shift (CLS) の改善に有効です。

具体的には、contain: sizeまたはcontain: strictが指定された要素に対して、内部コンテンツのレイアウト計算が完了するまで、ここで指定されたサイズがプレースホルダーとして機能します。contain-intrinsic-sizeは、contain-intrinsic-widthとcontain-intrinsic-height、または書字方向に応じた論理プロパティであるcontain-intrinsic-block-sizeとcontain-intrinsic-inline-sizeをまとめて設定できるショートハンドプロパティです。値は、例えば「500px 300px」のように幅と高さを半角スペースで区切って指定します。単一の値を指定した場合は、幅と高さの両方にその値が適用されます。

Copy
1contain-intrinsic-size: 100px 200px;

引数なし

引数はありません

戻り値なし

戻り値はありません