aspect-ratio
上級読み方：アスペクトレシオ｜英語：Aspect Ratio
要素の縦横比を指定するプロパティで、aspect-ratio: 16/9; で動画のような比率になるよ。いつ使う？ 動画の埋め込み枠、サムネイル画像、カードのアイキャッチなど、縦横比を固定したいときに使うよ。間違いやすいポイント: widthとheightの両方を指定するとaspect-ratioが無視されるよ。片方だけ指定（widthだけ等）して、もう片方はaspect-ratioに任せよう。
やさしい説明
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; }いつ使う？
動画の埋め込み枠、サムネイル画像、カードのサイズを統一したいときに使います。レスポンシブでも比率が崩れないので便利です。
間違いやすいポイント
❌ widthとheightの両方を固定するとaspect-ratioが無視される
widthとheightの両方を指定すると、aspect-ratioは効きません。片方だけ指定して、もう片方は自動計算させましょう。
よくある疑問
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; と書けば、幅に合わせて高さが自動計算され、どの画面サイズでも比率が保たれます。
関連用語
📖 関連レッスン
レッスンを見る →