黄金比・白銀比の分割

長さを入れると、黄金比・白銀比・青銅比・1:√3 で分けたときの短い側・長い側・分割点を出します。短辺から長辺、長辺から短辺の逆算もでき、選んだ比の分割をプレビューして CSS の grid 指定をコピーできます。

長さ

長さ

単位

入れた長さは

自分で決める比（1 : ○）

比ごとの結果行を押すと下のプレビューが切り替わります

分割プレビュー

長辺：短辺がその比の長方形から、できるだけ大きい正方形を順に切り取っていった図です。点線が全体を「1 : 比」に分ける位置です。黄金比は正方形を1つ、青銅比は3つ取るごとに元と同じ形の長方形が残ります（白銀比 1:√2 は、図とは別に、長辺を半分に折るたびに同じ形になります）。

CSS の例

比の値：黄金比 φ＝(1+√5)/2≈1.618、白銀比＝√2≈1.414（A判・B判の用紙の縦横比。日本では大和比とも。黄金比・青銅比と同じ「貴金属比」の系列では白銀比を 1+√2≈2.414 とする使い方もあり、ここでは1:√2を扱います）、青銅比＝(3+√13)/2≈3.303、1:√3≈1.732。表示は小数第2位で丸めています。px は画面上の CSS ピクセル、mm は印刷・紙のサイズで使う想定です。きれいに見えるかどうかは内容や余白次第なので、レイアウトの出発点の目安として使ってください。

黄金比・白銀比の分割でできること

Webや印刷のレイアウトで、幅や長さを黄金比・白銀比・青銅比・1:√3 で分けたいときに、短い側・長い側・分割点を計算し、分割の図とCSSのgrid指定を出すツールです。

使い方

「長さ」に数値を入れ、「単位」で px か mm を選びます。
「入れた長さは」で、全体の長さ（2つに分ける）・短辺（→ 長辺を出す）・長辺（→ 短辺を出す）のどれかを選びます。必要なら「自分で決める比（1 : ○）」も入れます。
「比ごとの結果」の表で各比の寸法を比べ、行を押すと「分割プレビュー」がその比に切り替わります。
「CSS の例」で grid-template-columns と aspect-ratio の指定を確認し、「CSSをコピー」でコピーします。

計算の仕組みと注意点

全体の長さLを1 : r に分けるとき、短い側＝L÷(1＋r)、長い側＝L−短い側です。短辺sから長辺はs×r、長辺lから短辺はl÷rで求めます。
比の値は、黄金比 (1＋√5)/2≈1.618、白銀比 √2≈1.414（A判・B判の用紙の縦横比）、青銅比 (3＋√13)/2≈3.303、1:√3≈1.732 です。
表と寸法は小数第2位、CSSの比の値は小数第3位で丸めています。
プレビューは、その比の長方形からできるだけ大きい正方形を順に切り取った図で、点線が全体を1 : 比に分ける位置です。
計算はブラウザ内だけで行い、入力内容は次に開いたときのためにこのブラウザに保存します。

よくある質問

960pxを黄金比で分けると何px？

約366.69pxと593.31pxです。長さに960、「全体の長さ」を選ぶと表の黄金比の行に出ます。CSSでは grid-template-columns: 1fr 1.618fr; でも同じ割合になります。

A4用紙は白銀比？

A判の用紙は短辺：長辺が1:√2（白銀比）です。長辺297mmを入れて「長辺（→ 短辺を出す）」を選ぶと、短辺は約210.01mmと出ます。

黄金比をCSSで使うには？

グリッドの列を grid-template-columns: 1fr 1.618fr; のように指定するか、縦横比を aspect-ratio: 1.618 / 1; にします。このツールの「CSS の例」をコピーして使えます。