アスペクト比・黄金比の計算
幅と高さから16:9のような比を求め、比と片方の長さからもう一方を計算します。padding-topの%やaspect-ratioのCSS、黄金比・白銀比での分割、親要素の幅に対する%とpxの換算もできます。
幅と高さから比を求める
幅と高さを入力すると比を求めます。
- 比（約分） —
- 幅 ÷ 高さ —
- 近いよく使う比 —
- padding-top —
- aspect-ratio —
比と片方の長さから、もう一方を求める
幅か高さのどちらかを入力すると、もう一方を計算して入れます（最後に入力した方を基準にします）。
比と、幅か高さを入力してください。
よく使う比の早見表
| 比（幅:高さ） | 幅 ÷ 高さ | 高さ | padding-top | aspect-ratio | 主な用途 |
|---|
黄金比・白銀比で長さを分ける
長さを入力すると分割します。
- 分けたときの長い方 —
- 分けたときの短い方 —
- この長さを短い辺にすると長い辺は（× 比） —
- この長さを長い辺にすると短い辺は（÷ 比） —
親要素の幅に対する % ⇔ px
親要素の幅と値を入力すると換算します。
- 換算結果 —
補足
- 比は最大公約数で約分します（1920×1080 → 16:9）。1.91:1 のような小数は 191:100 のように整数にしてから約分します。 小数第 5 位より細かい値や √2 のような無理数は整数比にせず、小数で表示します。
-
padding-top の % は、padding の % が「親要素の幅」を基準にする性質を使った書き方です。
今のブラウザでは
aspect-ratioプロパティを使えば足ります。 - 「白銀比」は 2 つの意味で使われます。日本で大和比とも呼ぶ 1:√2（≒1:1.414、A判・B判の紙の縦横比）と、 貴金属比の 1:(1+√2)（≒1:2.414）です。このツールでは両方を別に載せています。
- 「21:9」はウルトラワイドモニターの呼び名で、実際の解像度は 2560×1080（64:27）や 3440×1440（43:18）などです。
- 文字サイズの % は親要素の font-size が基準で、ここでの計算（親要素の幅が基準）とは違います。 文字サイズの換算は「rem・px・em の換算」を使ってください。
よくある質問
1920×1080 は何対何ですか？
16:9 です。幅と高さを最大公約数（120）で割ると 16:9 になります。このツールでは幅と高さを入れるだけで約分した比を表示し、よく使う比のどれに近いかも示します。
16:9 で幅が 800px のとき、高さは何px ですか？
450px です。高さ = 幅 × 9 ÷ 16 で求められます。「比と片方の長さから、もう一方を求める」に比と幅を入れると計算します。割り切れないときは小数第 2 位まで表示し、整数に丸めた値も添えます。
padding-top: 56.25% とは何ですか？
16:9 の箱を作る古い書き方です。padding の % は親要素の「幅」を基準にするため、高さ ÷ 幅 × 100（9 ÷ 16 × 100 = 56.25）% を書くと、幅に合わせて高さが決まります。今のブラウザでは aspect-ratio: 16 / 9; で足ります。
白銀比は 1:1.414 と 1:2.414 のどちらですか？
どちらも白銀比と呼ばれます。日本では 1:√2（≒1:1.414、大和比とも。A判・B判の紙の比）を指すことが多く、数学の貴金属比では 1:(1+√2)（≒1:2.414）を指します。このツールでは両方を分けて計算できます。
文字サイズの % を px に換算できますか？
このツールではできません。ここで扱う % は「親要素の幅」に対する割合（width や padding など）です。font-size の % は親要素の文字サイズが基準なので、「rem・px・em の換算」を使ってください。