レスポンシブのコーディングで％で指定する際に簡単に計算してくれる便利サイトを紹介します。
レスポンシブのコーディングではpxを%に変換することが多いですよね。
親のコンテンツ幅と確認したコンテンツの幅がわかれば簡単に計算できます。
レスポンシブコーディングの計算に役立つサイト紹介
今回紹介するサイトは２サイト。
どちらも入力するだけで計算することができます。
まずはこちら。
WEBクリエイターの部屋様で「pxから%へ比率計算ツール」を公開されています。
日本語でわかりやすく何を入れれば良いかも一目瞭然です。
余分な小数点も省いてくれているのでコピペするだけで簡単です。
pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツール
こちらは英語のサイトになりますが、見れば使い方もわかると思います。
基本的に親要素のpxサイズと子要素のpxサイズを入れるだけなので。
こちらは割り切れない場合小数点以下を13桁表示。
基本的に「○.○○%」までしか使わないのでちょっと不便かもしれません。
個人的には、こちらを多く使用していますが上の方が使いやすいかも・・・？
Really Quick Responsive Web Design Calculator
※消えてしまったようです・・・。
どちらも簡単に計算できるのでレスポンシブで計算が必要な際は是非活用してみてね！
Sassを使っている方は、自動で計算してくれるmixinスニペットも用意したので活用してみてください！
レスポンシブコーディングで使える！横幅自動計算mixinスニペット
ABOUT ME
