pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツール

コーディング

レスポンシブコーディングのときpxを%に変換する機会が多くなりませんか?
たとへば2カラムのWEBデザインでpxから双方の幅(width)の比率(%)を計算したいといったことはよくあると思います。

そこで今回、pxから%に変換するための比率計算ツールを作成しました。
数値を入れるだけで簡単に%の値を得ることができます。
ぜひお役立てください。

pxから%へ比率計算ツール

計算結果

0%

【親要素と子要素のビジュアル比較】

親要素[100% (1000px)]

子要素[0% (0px)]

使い方

ラフデザインをもとにコーディングすることを想定しています。
親要素、子要素(%へ変換したい要素)それぞれのpxを入力すると、計算結果に結果が出る仕組みになってます。
計算結果は実際コピペで使うことを考えて、小数点第2位までの切り捨てで表示されるようになっています。

【親要素と子要素のビジュアル比較】は見た目の目安に設置しております。
※pxの数値も同時に記載されますが、実際の大きさとは異なります。