ic

pxからvwへの変換ツール

HTML/CSS

画面幅に合わせて大きさが変わる単位『vw』便利で皆さんも使っていると思います。

しかしデザインの幅はpxで指定されておりpxからvwに変換する際、計算をしていらっしゃる方も多いと思います。

今から紹介する2つのツールを使用すればその作業を短縮することができます。

 

変換ツールその1

px-vw-calclator

こちらのツールは「任意の画面幅」と「任意のpx」を入力すると「vw」に変換してくれるツールです。

pxの入力欄とvwの欄にFont Sizeと記載されていますが、大きさを指定する様々なプロパティに使用可能です。

画面幅は「iphone5/SE」「iphone6/7/8/X」「iphone6/7/8/Plus」の指定と、任意のpxの指定ができます。

 

変換ツールその2

一括pxからvw計算機

こちらのツールは記載したCSSのpxをvwに変換するツールです。

上部の『Base:○○px』の欄に「任意の画面幅」を入力し、左の「CSSを入力してください」と記載された欄に記載したcssをコピペします。

そうすると上部の『Base:○○px』に記載した任意の画面幅に合わせたvwをpxから一括で変換してくれるツールです。

vwに変換されたCSSは右の「pxをvwに変換したCSSを出力します」と記載された欄に変換結果が出力されます。

しかしこちらのページに記載されている「※ 尚、「border: 1px solid #000;」や「transform: translateY(10px)」等には対応していませんのでご了承下さい」の通り、

一部の記載には対応していません。

その為、私はこちらのツールで一括変換した後、変換されなかったpxはその1で紹介した『px-vw-calclator』を併用しています。

 

今回紹介したツールを使用することでコーディング作業が比較的に早くなると思います。

ぜひ皆さんも使ってみてください。