aspect-ratio
上級読み方：アスペクトレシオ｜英語：Aspect Ratio
要素の縦横比を指定するプロパティで、aspect-ratio: 16/9; で動画のような比率になるよ。
やさしい説明
aspect-ratioは、要素の縦横比を固定するプロパティです。幅が変わっても比率が保たれます。
テレビ画面は16:9、Instagramの写真は1:1（正方形）ですよね。aspect-ratioを使えば、画面サイズが変わっても同じ比率を保てます。
以前はpadding-topハックという複雑な方法が必要でしたが、今は aspect-ratio: 16/9 と書くだけで実現できます。
具体例・使い方
/* 動画のような16:9の比率 */
.video { aspect-ratio: 16 / 9; width: 100%; }
/* 正方形のサムネイル */
.thumbnail { aspect-ratio: 1; width: 200px; }
/* 縦長のカード（3:4） */
.card { aspect-ratio: 3 / 4; }よく使う比率の早見表
| 書き方 | 比率 | 使う場面 |
|---|---|---|
16 / 9 | 横長（ワイド） | YouTube動画・スライド |
1 / 1 | 正方形 | Instagram・アイコン・サムネ |
4 / 3 | やや横長 | 昔のテレビ・写真 |
3 / 4 | 縦長 | ポートレート・カード |
9 / 16 | 縦長（スマホ全画面） | TikTok・ストーリー |
いつ使う？
- YouTube等の動画埋め込み枠を崩さず置きたいとき（16/9）
- サムネイル画像のサイズを揃えたいとき（1/1）
- カードの高さをバラつかせず統一したいとき
- レスポンシブで幅が変わっても比率を保ちたいとき
昔は padding-top: 56.25% という分かりにくい「padding-topハック」で16:9を作っていました。今は aspect-ratio: 16 / 9 の1行でOK。古い解説サイトを見て混乱しないよう注意しましょう。
間違いやすいポイント
❌ widthとheightの両方を固定するとaspect-ratioが無視される
両方を指定すると比率より実寸が優先されます。片方（通常はwidth）だけ指定して、もう片方は自動計算に任せましょう。
❌ 中の画像が比率からはみ出す
枠に aspect-ratio を付けても、中の <img> が比率と違うと不自然に伸びます。画像側に object-fit: cover を付けると、枠に合わせてきれいに切り取られます。
よくある疑問
Q: aspect-ratioの書き方は？
A: aspect-ratio: 16/9;（横長動画）、aspect-ratio: 1/1;（正方形）、aspect-ratio: 4/3;（写真）のように書きます。
Q: aspect-ratioを使わない方法は？
A: 昔はpadding-top: 56.25%;（16:9の場合）というハックが使われていました。今はaspect-ratioの方がシンプルです。
Q: レスポンシブで縦横比を保つには？
A: width: 100%; aspect-ratio: 16/9; と書けば、幅に合わせて高さが自動計算され、どの画面サイズでも比率が保たれます。
関連用語
📖 関連レッスン
レッスンを見る →