アスペクト比プレースホルダー計算ツールとは
アスペクト比プレースホルダー計算ツールは、レイアウトシフトを防ぐためのaspect-ratio CSS値とpadding-bottomフォールバックを計算します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Calculate the CSS aspect-ratio value and padding-bottom fallback percentage to prevent Cumulative Layout Shift. Reserve the correct space for images, videos, and embeds before they load.
Limitations
- The padding-bottom fallback technique requires position: relative on the parent container and position: absolute on the child element for correct sizing behavior.
- Aspect-ratio only works when the element has a defined width. If the element width is auto or not set, the aspect-ratio calculation has no basis to compute the height.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。