aspect-ratioの使い方と実例｜比率を整えて、画面幅に強いレイアウトを

Webページの構成要素として、画像やiframeなどのメディアは多用されます。 しかし、これらの読み込みが遅れると、レイアウトが一時的に崩れることがあります。

この問題の一因は、メディアのサイズが読み込み完了まで確定しないことにあります。 その結果、たとえば押そうとしたリンクの位置がずれ、意図しない場所をクリックしてしまうといった不便が生じることがあります。

aspect-ratioは、CSSで要素の縦横比を明示的に指定できるプロパティです。 読み込み前でもその要素が占めるスペースをブラウザが予測できるため、 レイアウトの安定性が向上します。

実際には以下のような利点があります。

• 読み込み前でもサイズが確保され、レイアウトが崩れにくくなる
• レスポンシブ対応が簡単になる
• 古くから使われていたpadding-topによる比率維持のテクニックが不要になる

また、Googleが重視するWebパフォーマンス指標「Cumulative Layout Shift（CLS）」の抑制にも有効です。

本記事では、aspect-ratioの基本的な使い方や代表的な使用例、 従来の手法との違いについて簡潔に解説します。

基本文法と振る舞い

aspect-ratioは、次のように使用します。

.element {
  aspect-ratio: 16 / 9;
}

この例では、要素の横幅が16、高さが9の比率になるようにサイズが調整されます。比率は整数だけでなく、小数や計算式でも指定可能です。

実際に見てみましょう。下のボックスは aspect-ratio: 16 / 9 を使って作られています。

使える対象

aspect-ratioは以下のような要素に使えます。

• ブロック要素（divなど）
• 画像（img）
• iframe
• 動画（video）

実際には、幅（width）が決まったときに高さ（height）が自動的に計算される、あるいはその逆の挙動になります。明示的にwidthとheightの両方が指定されている場合、aspect-ratioは無視されます。

レイアウトシフトとWeb Vitals

スワン

「あっ、今押そうとしたのに…！」
読み込み中にリンクやボタンの位置がずれて、意図しない場所をクリックしてしまった経験、ありませんか？

Webページの読み込み中、画像や広告があとから挿入されてテキストが押し下げられるといったことがあります。これは、Cumulative Layout Shift（CLS）と呼ばれる現象で、GoogleのWeb Vitals指標のひとつでもあります。

このような「視覚的な揺らぎ」が発生すると、ユーザーは混乱したり、誤クリックをしたりすることがあります。CLSのスコアが高いページは、検索順位やユーザー体験に悪影響を及ぼすとされており、現代のWeb開発では避けるべき問題です。

ここでaspect-ratioが役立ちます。

このプロパティを使えば、画像や動画が読み込まれる前からその表示領域の縦横比をブラウザが確保してくれるため、後からの読み込みでもレイアウトがずれないのです。

たとえば画像に明確な比率が設定されていれば、その領域は固定されたスペースとして扱われるため、他の要素が押し下げられる心配がありません。これにより、CLSスコアの改善が期待できます。

古いやり方との比較

aspect-ratioが登場する以前、縦横比を維持するためには padding-top や padding-bottom を使ったハックがよく使われていました。

HTML

<div class="wrapper">
  <iframe src="..."></iframe>
</div>

CSS

.wrapper {
  position: relative;
  padding-top: 56.25%;
  /* 16:9 の比率 = 9 ÷ 16 = 0.5625 → 56.25% */
}

.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

この方法では、パーセンテージのpaddingが親要素の幅に対する比率として働くため、ある種の比率を保つことができます。しかし、やや直感的ではなくなります。

一方で、aspect-ratioを使えば以下のように簡潔に書けます。

CSS

.wrapper {
  aspect-ratio: 16 / 9;
}

.wrapper iframe {
  width: 100%;
  height: 100%;
}

構造自体は従来のpadding-topを使った方法と似ていますが、aspect-ratioを使えば、より明示的で直感的な書き方ができます。

ブラウザ対応状況

aspect-ratioは、モダンなブラウザを対象とした開発であれば、基本的に問題なく使用できます。特に2021年以降の環境では、安定して利用できると考えてよいでしょう。

ちなみに、以下は私が所有するデバイスで動作を確認した結果です。

筆者の確認環境と動作結果（2025年7月現在）

実例で理解するaspect-ratio

ここからは、実際にaspect-ratioを使う具体的な例を見ていきます。使用頻度の高い例を通じて、実際の使いどころを具体的にイメージできるように構成しました。

例1：画像一覧を均一に整列（aspect-ratio + object-fit）

商品一覧やギャラリーなどで、異なるサイズ・比率の画像を均一に並べたいケースはよくあります。ここでは、aspect-ratioとobject-fitを組み合わせることで、バラバラな画像も同じ比率で整えて表示する方法を紹介します。

下の例では、サイズの異なる画像が、すべて「4:3」の比率に揃って表示されています。

HTML

<div class="image-grid">
  <div class="image-item"><img src="image1.webp" alt=""></div>
  <div class="image-item"><img src="image2.webp" alt=""></div>
  <div class="image-item"><img src="image3.webp" alt=""></div>
</div>

CSS

.image-grid {
  display: flex;
}

@media print, (min-width: 768px) {
  .image-grid {
    gap: 30px;
  }
}

@media screen and (max-width: 767px) {
  .image-grid {
    gap: 10px;
  }
}

.image-item {
  flex: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

表示イメージ

すべての画像が統一された大きさと形で表示されていることが分かります。読み込み前でも枠が確保されるため、レイアウトが揺れず安定するのも大きな利点です。

例2：YouTube動画の埋め込み

YouTubeなどの外部動画をiframeで埋め込む場合、読み込みが遅れると動画領域の高さが一瞬ゼロになり、レイアウトが不安定になることがあります。これもaspect-ratioを使えば、読み込み前から縦横比に基づいたスペースを確保することができます。

たとえば、YouTubeの動画は通常「16:9」の比率で表示されるため、以下のように指定します。

HTML

<div class="video-wrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/AY5qcIq5u2g?si=MalfBBn8u0jQ1Mfr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

CSS

.video-wrapper {
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

表示イメージ

この方法で、動画が読み込まれる前でも、16:9の比率を持つスペースが確保されるため、周囲のレイアウトが崩れません。

例3：Googleマップの埋め込み

Googleマップをiframeで埋め込む場合も、YouTube動画と同様に、読み込みが遅れるとマップ領域が一瞬ゼロの高さになり、ページ全体のレイアウトに影響を与えることがあります。

このようなケースでは、aspect-ratioを使うことで、読み込み前からマップの縦横比を確保することができ、レイアウトの安定性が向上します。

以下の例では、4:3の比率でGoogleマップを埋め込んでいます。

HTML

<div class="map-wrapper">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12963.301822389489!2d139.75676075126245!3d35.68129957247289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1751546759395!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

CSS

.map-wrapper {
  aspect-ratio: 4 / 3;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
}

表示イメージ

この方法なら、Googleマップが読み込まれていない段階でも、4:3のスペースが先に確保されるため、レイアウトがずれることなく表示できます。

まとめ

最近のコーディングでは、常に画面幅やデバイスの変化を見据えながら、柔軟なレイアウト設計が求められます。いわば、レスポンシブとのにらめっこが日常です。

そんな中で、要素の比率をどう保つかは、地味だけれど頻出する悩みのひとつです。

aspect-ratioを使えば、レイアウトの安定性を保ちながら、無理なく比率をコントロールできます。古くからのpadding-topハックを置き換えることで、コードの見通しもぐっと良くなります。

一見地味だけど、触ってみると「これは確かに便利だな」と思えるはずです。画像一覧でも、iframeの埋め込みでも、身近なところで一度使ってみてください。少しでもレイアウト設計のヒントになれば幸いです。

みなと

フロントエンドエンジニア

XContact

東京のWeb制作会社で15年以上働いている現役フロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。