「この画像の縦横比（アスペクト比）を保ったまま、幅1200pxにしたら高さはいくつ？」
「基準フォントサイズが16pxのとき、24pxって何remだっけ？」
「デザインのアクセントに黄金比を使いたいけど、計算が面倒…」
Webデザインやコーディングの作業中、こうした細々とした計算のために、その都度電卓を起動したり、Google検索したりして、集中力が途切れてしまうことはありませんか？
この「Webデザイン用 計算機スイート」は、そんなあなたの「面倒」を解決します。
私が、デザイン作業中に頻繁に発生する「ちょっとした計算」の手間を、一つのページに集約するために開発しました。
タブを切り替えるだけで、必要な計算機にすぐにアクセスできます。
アスペクト比
CSS単位変換
黄金比・白銀比
アスペクト比（縦横比）計算機
比率と片方のサイズを入力すると、もう片方のサイズを自動で計算します。
:
CSS単位変換 (px ↔ rem/em)
基準フォントサイズ（`body`タグなど）を基準に、`px` と `rem/em` を相互に計算します。
黄金比・白銀比 計算機
基準となる数値（幅や高さなど）を1つ入力すると、各種比率に対応する数値を計算します。
黄金比 (1 : 1.618)
短辺:
—
長辺:
—
白銀比 (1 : 1.414)
短辺:
—
長辺:
—
使い方
- 上部のタブ（「アスペクト比」「CSS単位変換」「黄金比・白銀比」）をクリックして、使いたい計算機を選びます。
- 各計算機のフォームに必要な数値（比率、基準サイズ、px値、基準の数値など）を入力します。
- 数値の入力と同時に、必要な計算結果がリアルタイムで自動的に表示されます。
この制作物が役に立ったら
「このツール、ブックマークしておこう」と思っていただけたら、ぜひSNSでシェア（共有）していただけると嬉しいです。
開発者（私）の励みになります！