制作ツール

レスポンシブの横幅を簡単に%で計算してくれるサイト

レスポンシブのコーディングで%で指定する際に簡単に計算してくれる便利サイトを紹介します。
レスポンシブのコーディングではpxを%に変換することが多いですよね。
親のコンテンツ幅と確認したコンテンツの幅がわかれば簡単に計算できます。

 

レスポンシブコーディングの計算に役立つサイト紹介

今回紹介するサイトは2サイト。
どちらも入力するだけで計算することができます。

 

まずはこちら。
WEBクリエイターの部屋様で「pxから%へ比率計算ツール」を公開されています。
日本語でわかりやすく何を入れれば良いかも一目瞭然です。
余分な小数点も省いてくれているのでコピペするだけで簡単です。

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

 

 

こちらは英語のサイトになりますが、見れば使い方もわかると思います。
基本的に親要素のpxサイズと子要素のpxサイズを入れるだけなので。
こちらは割り切れない場合小数点以下を13桁表示。
基本的に「○.○○%」までしか使わないのでちょっと不便かもしれません。
個人的には、こちらを多く使用していますが上の方が使いやすいかも・・・?

Really Quick Responsive Web Design Calculator

 

 

どちらも簡単に計算できるのでレスポンシブで計算が必要な際は是非活用してみてね!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)