アスペクト比計算と解像度一覧（16:9 / 4:3 / 9:16 / 1:1・CSS設定）

ディスプレイ・動画・SNS画像で使われる主要なアスペクト比（縦横比）のピクセル解像度一覧、計算式、および CSS での指定方法です。

1. オンライン アスペクト比計算ツール

幅または高さを入力すると、指定したアスペクト比に応じたもう一方のサイズを自動算出します。

---

2. 主要アスペクト比のピクセル解像度一覧表

アスペクト比	主な用途・プラットフォーム	代表的な解像度 (幅 × 高さ px)
16 : 9 (ワイド)	YouTube, TV, PCモニタ, Webヒーロー画像	1920 × 1080 (Full HD), 1280 × 720 (HD), 2560 × 1440 (2K), 3840 × 2160 (4K)
9 : 16 (縦型)	TikTok, Instagram リール, YouTube Shorts	1080 × 1920, 720 × 1280
4 : 3 (スタンダード)	iPad, 写真カメラ, 旧型TV	1024 × 768, 1600 × 1200, 2048 × 1536
1 : 1 (正方形)	Instagram 投稿, アバターアイコン	1080 × 1080, 512 × 512, 128 × 128
21 : 9 (ウルトラワイド)	映画 (シネマスコープ), ウルトラワイドモニタ	2560 × 1080, 3440 × 1440

---

3. アスペクト比の計算公式

横幅を W、高さを H、比率を X : Y とした時：

• 幅 W から高さ H を求める: H = W × (Y / X) (例: 1280 × 9 / 16 = 720 px)
• 高さ H から幅 W を求める: W = H × (X / Y) (例: 1080 × 16 / 9 = 1920 px)

---

4. CSS でのアスペクト比の指定方法 (aspect-ratio)

モダンCSSでは、aspect-ratio プロパティを使用することで、レスポンシブ環境で要素の比率を維持したまま自然に伸び縮みさせることができます。

.responsive-video {
  width: 100%;
  aspect-ratio: 16 / 9; /* 幅に合わせて高さが自動維持される */
}

.square-card {
  width: 200px;
  aspect-ratio: 1 / 1;  /* 正方形 */
}