アスペクト比プレースホルダー計算ツールとは
aspect-ratioはCSSプロパティで、要素の推奨アスペクト比を設定し、コンテンツが読み込まれる前にブラウザが幅から高さを計算できるようにします。これにより、視覚的な安定性を測定するCore Web Vitals指標であるCumulative Layout Shift（CLS）を防ぎます。画像、動画、埋め込みに事前に正しいスペースを確保することで、リソース読み込み中もページレイアウトが安定します。
クイックアンサー
CSSのaspect-ratio値とpadding-bottomフォールバックのパーセンテージを計算して、Cumulative Layout Shiftを防止します。画像、動画、埋め込みの読み込み前に正しいスペースを確保します。
Last updated: 2026-06-11
制限事項
- padding-bottomフォールバック手法では、正しいサイズ調整のために親コンテナにposition: relative、子要素にposition: absoluteが必要です。
- aspect-ratioは要素に定義された幅がある場合にのみ機能します。要素の幅がautoまたは未設定の場合、aspect-ratioの計算には高さを計算する基準がありません。
- 画像に定義された幅や高さなしでaspect-ratioを使用すると、ページ読み込み中にCumulative Layout Shiftが発生する可能性があります。画像要素には必ずwidthまたはheight属性を設定するか、aspect-ratioとともに明示的なCSS寸法を設定して、ブラウザが画像読み込み前にスペースを確保できるようにしてください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 16:9、4:3、1:1などのプリセット比率を選択するか、カスタムの幅と高さを入力します。
- モダンブラウザ向けに生成されたaspect-ratio CSS値を確認します。
- aspect-ratioプロパティをサポートしないブラウザ向けのpadding-bottomフォールバックをコピーします。
- ラッパーマークアップを画像または埋め込み要素に適用します。プレースホルダーはリソース読み込み前に正しい高さを確保します。
主な用途
- ブログ投稿のヒーロー画像のスペースを確保し、画像読み込み時にレイアウトがずれないようにする。
- YouTubeやVimeoのiframe用にプレーヤーのアスペクト比を保持する安定した動画埋め込みコンテナを作成する。
- ギャラリーグリッドの遅延読み込み画像用のプレースホルダーボックスを構築する。