【CSS Modules】aspect-ratioプロパティの使い方

aspect-ratioプロパティは、要素の理想的な縦横比を明示的に設定し、保持するプロパティです。このプロパティを使用することで、Webページ上の要素が、コンテンツの読み込み状況や利用可能なスペースに関わらず、指定されたアスペクト比を維持するように動作します。これにより、画像や動画などのメディア要素が読み込まれる際に、レイアウトが予期せず変動する「レイアウトシフト」を防ぎ、ユーザー体験の向上に貢献します。

指定できる値は、主に「幅 / 高さ」の形式で記述します。例えば、「16 / 9」と指定すると、要素の幅が高さの16/9倍になるように調整されます。「1 / 1」は正方形を表し、「4 / 3」は一般的な写真の比率です。初期値である「auto」を設定すると、要素はそのコンテンツや他のCSSプロパティによって自然なアスペクト比を決定します。

このプロパティは特に、コンテンツのサイズが未確定な画像や動画のプレースホルダーに有効です。要素の縦横比を事前に確保しておくことで、コンテンツが後から読み込まれても、その領域が事前に確保されているため、周囲の要素がずれることなく安定した表示を実現します。また、レスポンシブデザインにおいて、要素の幅が変化しても、高さが自動的に調整され、常に正しい縦横比を維持できるため、表現の一貫性を保つことができます。

他のwidthやheightプロパティと併用した場合、aspect-ratioプロパティは要素のサイズ調整において重要な役割を果たします。例えば、widthが固定され、heightがautoの場合、aspect-ratioがheightを計算します。これにより、複雑なJavaScriptを用いずに、CSSだけで柔軟なレイアウト制御が可能になります。

Copy
1.element {
2  aspect-ratio: 16 / 9;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません