アスペクト比計算の基本｜16:9や4:3の解像度一覧
デザイン 画像 動画 基礎知識
結論
アスペクト比は「横：縦」の比率。YouTubeやテレビは16:9、写真は4:3や3:2が一般的。CSSでは プロパティを使うのが現代の正解。
主要なアスペクト比一覧
| 比率 | 主な用途・解像度 |
|---|---|
| 16:9 (ワイド) | YouTube, テレビ, モニタ (1920x1080など) |
| 4:3 (スタンダード) | 昔のテレビ, iPad, 写真 (1024x768など) |
| 1:1 (正方形) | Instagram, プロフィール画像 |
| 21:9 (シネマスコープ) | 映画, ウルトラワイドモニタ |
アスペクト比の計算式
横の長さを $W$、縦の長さを $H$、比率を $x:y$ とすると： $$ W = H \times (x / y) $$ $$ H = W \times (y / x) $$
例えば、16:9で横が1280pxなら、縦は $1280 \times (9 / 16) = 720px$ になります。
📐 この場でアスペクト比を計算する
CSSでの指定方法
かつては padding-top を使ったハックが必要でしたが、現在は aspect-ratio プロパティ一括で指定できます。
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}これにより、レスポンシブ環境でも常に比率を保ったまま要素を伸縮させることが可能です。
関連記事
あわせて読むと理解が深まる関連記事をまとめました。
| トピック | 記事 |
|---|---|
| Aspect Ratio 計算 | Aspect Ratio 計算｜16:9・4:3 解像度一覧 |
| Image Resize 一括 | Image Resize 一括｜アスペクト比維持リサイズ |
| 画像リサイズのアスペクト比維持 | 画像リサイズのアスペクト比維持｜崩さないためのコツ |
| Favicon Generator | Favicon Generator｜ico/png/svg マルチサイズ |
| Escape Sequence 一覧 | Escape Sequence 一覧｜\n \t Unicode エスケープ |
| FPS Calculator | FPS Calculator｜30fps to ms・60fps/120fps 換算表 |
| HTTPステータスコード一覧 | HTTPステータスコード一覧｜200・404・500の意味と対処法 |
| セキュリティヘッダー一覧と設定ガイド | セキュリティヘッダー一覧と設定ガイド｜CSP・HSTS・Referrer-Policy・Permissions-Policy |
| プログラミングで使うエスケープシーケンス一覧 | プログラミングで使うエスケープシーケンス一覧｜\n, \t, \\の意味 |
| 1フレームは何秒・何ms？ 60fpsと120fpsの計算方法 | 1フレームは何秒・何ms？ 60fpsと120fpsの計算方法 |
| AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026 | AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026｜GPTBot・ClaudeBot・Google-Extended・GEO戦略 |
| APIキャッシュ設計ガイド | APIキャッシュ設計ガイド｜ETag・Cache-Control・304・CDNキャッシュキーの実務 |