px → vw (%) 自動計算ツール【簡易履歴保存・一括変換早見表付き】

早見表

使い方

PSD、XDやFigmaなどのデザインデータからコーディングをする際、CSSでの各種サイズの数値をvwで指定するように指示される場面が多々あります。
デザイン上で15pxのサイズの要素をCSSへ記載するには、まず既存のツールに毎回対象の15と入れて変換された数値をコピーしてCSSを記載し、次は100pxの要素を指定したいのでツールの数値を変更してコピペして…という手順があまりにも煩わしく、頻繁に使う数字は画面上に一覧で残したまま、できればワンクリックでコピーできたらいいのにな、という思いから当ツールを作成いたしました。

画面幅によってテキストが意図しない箇所で改行されないようになったり、デザイン崩れを起こしにくくなるので、CSSの数値をvwで指定するのは非常に有効的ですがCSSコーディングが何より大変です。
そんな自分の体験から少しでも自分が楽に作業できるように(笑)、また同じようなお悩みを持つコーダーさんの手助けになれれば幸いです。

1. デザインの基準になるサイズを「基準値」のテキストボックスへ入力
   PCの場合は1200px、SPの場合は395pxなど。
2. 変換したい数値を下のテキストボックスへ入力
3. このマークをクリックすると、「vw」の単位まで含めてクリップボードへコピーできます。
   早見表へ自動で変換された数値も同様に、コピーマークをクリックすると「vw」の単位ごと数値をクリップボードへコピーできます。
4. 「保存」ボタンを押すと現在入力している数値がボタンの下に保存されます。
   繰り返し使用するのにご活用ください。
   保存した数値が不要になりましたら、「リセット」ボタンでクリアできます。

注意事項・その他

• このページをリロードすると、入力・保存した値は削除されます。
  保存した計算値はキャッシュやCookieへ保存していません。
• 気になる点や不具合、ご要望などございましたらお問い合わせフォームよりお気軽にお尋ね下さい。