アスペクト比（aspect-ratio）を理解すると「どんな画面でも崩れない」レイアウトが作れる
aspect-ratio は、ボックスモデルの中でも 画像・カード・動画枠・サムネイルなど、縦横比を固定したい UI で非常に強力なプロパティです。
従来は「padding hack」などのテクニックが必要でしたが、aspect-ratio の登場で 1行で安定した比率を作れるようになりました。
CSS と Tailwind CSS の両方で、初心者でも迷わず使えるように丁寧に解説します。
アスペクト比とは何か
縦横比を「比」で指定するプロパティ
.box {
aspect-ratio: 16 / 9;
}
これは「横：縦 = 16：9」の比率を保ちながら、
親要素の幅に応じて高さが自動計算されます。
よく使う比率の例
- 1 / 1 → 正方形
- 16 / 9 → YouTube動画や横長サムネ
- 4 / 3 → 写真・古いモニター比率
- 3 / 2 → カードや写真でよく使う
- 9 / 16 → 縦長動画（スマホ動画）
aspect-ratio の基本挙動
幅が決まると高さが自動で決まる
.box {
width: 300px;
aspect-ratio: 4 / 3;
}
→ 高さは 300 × (3/4) = 225px に自動計算される。
高さが決まると幅が自動で決まる
.box {
height: 200px;
aspect-ratio: 1 / 1;
}
→ 幅も 200px の正方形になる。
深掘り：aspect-ratio は「最終的な見た目のサイズ」を決める
従来の padding hack は「高さを padding で作る」ため、
内部に absolute を使う必要がありました。
aspect-ratio は 純粋にボックスのサイズを決めるため、
内部構造を汚さずに済むのが大きなメリットです。
CSS での基本的な使い方
正方形を作る
.square {
aspect-ratio: 1 / 1;
background: #ddd;
}
YouTube風の16:9枠
.video-frame {
aspect-ratio: 16 / 9;
background: #333;
}
カードのサムネイル
.thumb {
aspect-ratio: 4 / 3;
object-fit: cover;
}
Tailwind CSS での aspect-ratio
Tailwind には専用ユーティリティがあります。
aspect-square→ 1 / 1aspect-video→ 16 / 9- 任意比率 →
aspect-[4/3]のように書く
正方形
<div class="aspect-square bg-gray-300"></div>
16:9
<div class="aspect-video bg-black"></div>
任意比率（4:3）
<div class="aspect-[4/3] bg-gray-200"></div>
実践例：画像サムネイルを比率固定で表示
CSS版
.thumb {
aspect-ratio: 4 / 3;
width: 100%;
object-fit: cover;
border-radius: 8px;
}
HTML
<img src="photo.jpg" class="thumb">
Tailwind版
<img src="photo.jpg" class="aspect-[4/3] w-full object-cover rounded-lg">
画像が縦長でも横長でも、
枠の比率を保ったまま綺麗にトリミングされます。
実践例：カードの上部に固定比率の画像を置く
CSS版
.card-thumb {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Tailwind版
<img src="photo.jpg" class="aspect-video w-full object-cover">
カードの高さが揃うため、
グリッドレイアウトが美しく整います。
実践例：縦長動画（9:16）の枠を作る
CSS版
.vertical-video {
aspect-ratio: 9 / 16;
background: #000;
}
Tailwind版
<div class="aspect-[9/16] bg-black"></div>
スマホ動画やショート動画のプレビューに最適。
aspect-ratio の深掘りポイント
1. 親の幅に依存するためレスポンシブに強い
親が 300px → 高さも自動
親が 600px → 高さも自動
画面幅に応じて自然に伸び縮みする。
2. object-fit と組み合わせると最強
画像や動画を比率枠に収めるときは object-fit が必須。
object-cover→ 枠いっぱいにトリミングobject-contain→ 枠内に収める（余白ができる）
Tailwind では
<img class="object-cover">
3. height を指定すると aspect-ratio が上書きされる
.box {
aspect-ratio: 1 / 1;
height: 300px;
}
→ 幅も 300px の正方形になる
→ width を指定すると高さが決まる
aspect-ratio は「どちらか一方が決まればもう一方を決める」仕組み。
4. padding hack はもう不要
従来のテクニック：
.box {
padding-top: 56.25%; /* 16:9 */
position: relative;
}
aspect-ratio の登場で、
このような複雑なコードは不要になりました。
まとめ
aspect-ratio は、縦横比を固定したい UI に欠かせないプロパティです。
- 比率を「横/縦」で指定する
- 親の幅に応じて高さが自動計算される
- 画像・動画・カード・サムネイルで大活躍
- object-fit と組み合わせると綺麗に収まる
- Tailwind では
aspect-square/aspect-video/aspect-[4/3]などを使う
