こんにちは、デザイナーの小島です。

これまでにpxをvwに変換する方法として力技で変換する方法、ブラウザベースで変換する方法の記事を投稿させていただきましたが、今回新たにエクセルシート版とSCSSを使用した自動変換の方法をご紹介します。あたらしい技術が出来ない限りは、このシリーズはこれで最後になりますので、是非お読みください。

pxをvwにする事前情報・計算式

今までの記事で基本的な考え方を書いていなかった事に気づきました。。
まずはそこからご説明します。

vw（viewport width）は画面幅（viewport）を100vwとして、半分であれば50vwといったように、画面幅を基準として計算します。
たとえば画面幅が750pxであれば以下のようになります。

※これはビューポートを基準とする単位ではどれも同じで、vw以外だとvh（viewport height）、vmin（viewport minimum）、vmax（viewport max）も同じ計算になります。
パーセントと同じようにも感じますが、パーセントだと親要素の数値を基準とするため、画面幅を基準にした方がわかりやすいのでvwを使用すると単位がわかりやすくなります。

上記だけを見ると計算も簡単そうですが、細かな数値になるとわかりにくく、たとえば750pxが基準で2pxだと「0.26666666666vw」となります。ややこしいですね。
そのため、ぱっと出てしまう天才は不要ですが、普通の人は難しいと思うので計算式に当てはめる必要があります。計算式は以下になります。

基準値は作ったデザインの幅が750pxであればそのまま750、640pxで作れば640とそのままです。

上記を基にいくつかの方法をご紹介します。

力技でpxをvwにする方法（2017.8.7）

計算式に当てはめて、基準値を「320px、500px、640px、750px、1000px」の5つで表にしてみました。
ご覧いただければわかりますが、とてもわかりにくいです。。

>力技で変換する方法

ブラウザからpxをvwにする方法（2018/9/28）

力技の反省を活かし、ブラウザ上で計算出来るものを作成しました。
基準値を選択し、pxを入力後、変換ボタンをクリックすれば計算してくれるので、ちょちょっと調べたいが計算式忘れたという時には便利かと思います。

>ブラウザベースで変換する方法

アナログな感じでpxをvwにしたい！エクセル版

Web界隈の集まりなどでも時々その話をいただくのですが、「もっとたくさんの枠があったら良いのに」とか「コピペがめんどい」などご意見をいただく事もあります。

そこで、かんたんにコピペ出来て項目数もわりと自由にできるように、若干アナログチックですが、エクセルで作ってみました！
作業中、端に置いておけるように細長めに作ってみました！

自由に利用いただいて問題ございませんので、以下よりダウンロードいただきご使用ください。
>ダウンロードはこちら（xlsx：12KB）

基準値は320、500、640、750、800、1000にしてありますが、dataシートに書いてありますので、自由に変更してもらえればと思います。

自動的にpxをvwにしたい！SCSS版

色々なパターンを作ってみましたが、やっぱり自動化が一番楽ではあります。
力技にしろ、ブラウザ版にしろ、エクセルにしろ、「ちょちょっとpxをvwにしたい！」とか、「すでにあるサイトの一部をvwにしたい！」等の時くらいしか使わないと思います。

ですので、Scssで自動変換出来る記述も紹介したいと思います。

まずはscssファイルを作成し、以下を入力します。

$viewportのところに基準値を入力します。
上記では750にしました。
その下はpxをvwに変換する記述ですが、おまじないだと思っていただければと思います。

そして

と書いてコンパイルすると

となります！簡単です！
pxtovw(ピクセル数)と書けば、自動的にvwに変換してくれます。

実践的なのはやはりscssを使う方法ですが、案件によってはscssが使えなかったり、部分的に使いたいといったケースもあるかと思うので、やりたい事に合わせて使い分けていただければと思います。