Aspect-Ratio プロパティ

最終更新：2026-09-13

aspect-ratio Aspect-Ratio プロパティ

aspect-ratio プロパティは要素に固定の幅対高さ比を保たせ、昔の padding パーセンテージのハックを不要にします。初期値の auto は画像などと同様に要素の固有の比率を使います。これは比較的新しい CSS 機能で、動画やカードのレスポンシブなコンテナを大きく簡素化します。

カテゴリ
初期値	auto
継承	いいえ
適用対象	all
アニメーションタイプ	length
CSS バージョン	CSS3
状態	標準

📝 構文

aspect-ratio: auto || <ratio>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	要素の固有の縦横比を使用する。
`<ratio>`	タイプ	指定した縦横比（16/9 など）。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
aspect-ratio	✓ v88	✓ v88	✓ v89	✓ v15	✓ v74
すべての主要ブラウザーでサポート

ヒント： aspect-ratio と width:100% を組み合わせると適応型の等比コンテナができ、埋め込み動画や画像によく使われます。

❓ よくある質問

Qaspect-ratio と padding-top ハックの違いは何ですか？

Aどちらも等比コンテナを作りますが、aspect-ratio はネイティブなプロパティなので読みやすく保守も容易です。padding-top ハックは幅に対するパーセンテージの padding で高さを押し出し、典型的には ::before 疑似要素と絶対配置のコンテンツを使うため厄介です。aspect-ratio は1行で済むため、新しいプロジェクトには推奨されます。

Qaspect-ratio を設定しているときでも height は機能しますか？

Aaspect-ratio は既に決まった幅から高さを計算します。明示的に height も設定した場合、その明示的な高さが優先されて比率計算の高さを上書きするため、比率は保証されなくなります。比率を強制するには height を設定せず、width と aspect-ratio だけを設定してください。また、auto は画像の元の寸法などの要素の固有の比率を意味することに注意してください。

Qなぜ aspect-ratio が効かないのですか？

Aよくある原因：1つ目は要素に height も設定されていて、明示的な高さが優先されること。2つ目は要素に幅がなく、width:auto でコンテンツもないため比率の元となる幅がないこと。3つ目はブラウザーが古すぎることです。このプロパティは Chrome 88、Firefox 89、Safari 15 から安定サポートされました。デバッグ時はまず幅と高さの状態を確認し、width:100% などの幅を与えてください。

Qaspect-ratio でレスポンシブな動画コンテナを作るにはどうすればよいですか？

Aコンテナに width:100%; aspect-ratio:16/9 を設定します。親の幅が変わると高さは比率を保つように自動計算され、ボックスは等比スケーリングします。その後、iframe や video を絶対配置で中に埋めて満たします。これで padding-top ハックは完全に不要になります。画像の場合は img コンテナに aspect-ratio をあらかじめ設定すると、読み込み中のレイアウトずれ（CLS）を減らせ、Core Web Vitals が実測的に向上します。