px → vw 変換ツール（CSS一括変換）

Webデザインをレスポンシブ対応させる際、font-sizeやpaddingなどをpx（絶対単位）ではなくvw（viewport width、画面幅に対する相対単位）で指定すると、画面幅に応じて自動的に拡大・縮小するレイアウトを作れます。

変換式はシンプルで、vw値 = (px値 ÷ デザインカンプの幅) × 100です。例えばデザイン幅375pxの中で18pxのテキストは、18 ÷ 375 × 100 = 4.8vwになります。このツールはCSSコードを貼り付けるだけで、この計算をpx値ごとに自動で行い一括変換します。

When making a web design responsive, specifying properties like font-size or padding in vw (viewport width, relative to screen width) instead of px (absolute unit) lets your layout automatically scale with the screen width.

The formula is simple: vw value = (px value ÷ design width) × 100. For example, an 18px text within a 375px design width becomes 18 ÷ 375 × 100 = 4.8vw. This tool automatically performs this calculation for every px value the moment you paste in your CSS code.

在制作响应式网页设计时，将 font-size、padding 等属性用 vw（viewport width，相对于屏幕宽度的单位）而不是 px（绝对单位）来指定，就能让布局根据屏幕宽度自动缩放。

换算公式很简单：vw值 = (px值 ÷ 设计稿宽度) × 100。例如在375px设计稿宽度下，18px的文字换算为 18 ÷ 375 × 100 = 4.8vw。只需粘贴CSS代码，本工具就会自动为每一个px值完成这个换算并批量转换。

1. 「デザイン幅」で基準にするデザインカンプの幅（375・390・414・768・1440、または任意の値）を選択
2. 「単位」でvw・svw・lvw・dvw、または任意のカスタム単位を選択
3. 入力欄にCSSコードを貼り付ける、または「.cssファイルを開く」で読み込む
4. リアルタイムに変換後CSSが表示されるので「コピー」または「ダウンロード」で取得

border・outline・box-shadow・text-shadow・filter・@mediaのブレークポイント指定などは、意図せず変換すると崩れの原因になるため、除外オプションでpxのまま保持できます。

1. Choose the "Design width" to use as the base (375, 390, 414, 768, 1440, or a custom value)
2. Choose the "Unit": vw, svw, lvw, dvw, or a custom unit
3. Paste your CSS code into the input box, or load a .css file
4. The converted CSS appears in real time — click "Copy" or "Download" to get it

Properties like border, outline, box-shadow, text-shadow, filter, and @media breakpoint conditions can break your layout if converted unintentionally, so they can be kept in px using the exclude options.

1. 在「设计稿宽度」中选择作为基准的宽度（375、390、414、768、1440，或自定义数值）
2. 在「单位」中选择 vw、svw、lvw、dvw 或自定义单位
3. 将CSS代码粘贴到输入框，或加载一个 .css 文件
4. 转换后的CSS会实时显示，点击「复制」或「下载」即可获取

border、outline、box-shadow、text-shadow、filter 以及 @media 的断点条件等，如果被意外转换会导致布局错乱，因此可以通过排除选项保持 px 不变。

正直な話、きっかけは「もう電卓叩くの疲れた」でした。

フリーランスでコーディングの仕事をしていると、デザインカンプが375px基準で作られていて、そこに「このテキストは18px」「この余白は24px」みたいな指定がびっしり入ってるパターン、めちゃくちゃ多いんですよね。で、それをそのままpxで組んでも一応動くには動くんですが、画面幅が変わったときにガクッとレイアウトが崩れる。だからvwに変換して、画面幅に対して相対的に伸び縮みするようにしたい、というのはコーダーなら誰でも一度は通る道だと思います。

問題はそこからで、vw値 = px値 ÷ デザイン幅 × 100というだけの単純な計算式なのに、CSSファイル1本の中に何十箇所もpx指定があると、これを一つひとつ電卓で計算して手打ちで置き換えていくのが本当に苦痛でした。しかも数字を1桁打ち間違えるだけでレイアウトが崩れるので、地味に神経を使う作業でもあります。「これ、絶対誰かがツール作ってるでしょ」と思って探してはみたものの、単発でpx1個を変換するだけの電卓的なツールはあっても、CSSコードをまるごと貼り付けて一括変換できるものがなかなか見つかりませんでした。

さらに厄介だったのが、borderやbox-shadow、@mediaのブレークポイント指定まで無差別にvwへ変換されてしまうケース。border-widthを画面幅基準で伸縮させると細すぎたり太すぎたりするし、@media (max-width: 768px)のような分岐条件そのものをvwにされたら、レスポンシブの設計が根本から崩れます。「一括変換はしてほしいけど、変換してほしくない箇所もちゃんと除外してほしい」というのが、実際にコーディングしている人間の本音でした。

それなら自分の実務で使う分だけでも作ってしまおうと思い立ったのがこのツールの始まりです。デザイン幅を自由に指定できて、border系やshadow系、@mediaの条件式はデフォルトで除外、CSSファイルを丸ごと読み込んで一括変換できる——という、自分がまさに欲しかった機能を詰め込みました。同じように「px vw 変換、いちいち計算するのめんどくさい」と感じているコーダーの方の役に立てば、それが一番の目的達成です。

Honestly, it started because I was tired of reaching for a calculator every single time.

As a freelance coder, I constantly get design comps built on a 375px base, packed with instructions like "this text is 18px" or "this margin is 24px." Coding it directly in px technically works, but the layout falls apart the moment the screen width changes. So converting to vw — so things scale relative to screen width — is a rite of passage every coder goes through eventually.

The problem is what comes next. The formula vw value = px value ÷ design width × 100 is simple enough, but when a single CSS file has dozens of px values, manually calculating and retyping each one by hand is genuinely painful — and one misplaced digit can break the whole layout. I figured someone must have built a tool for this already, but all I could find were single-value px calculators, not something that could take a whole CSS file and convert it in one go.

What made it worse was tools that blindly converted everything, including border, box-shadow, and @media breakpoints. Scaling border-width by screen width makes it look too thin or too thick, and turning a condition like @media (max-width: 768px) into vw breaks the entire responsive logic. What I actually wanted was bulk conversion — with the ability to properly exclude the parts that shouldn't be touched.

So I decided to just build it for my own work. Freely adjustable design width, border/shadow/@media conditions excluded by default, and the ability to load and convert an entire CSS file at once — exactly what I needed. If it saves another coder from the same "ugh, do I really have to calculate this by hand" feeling, that's mission accomplished.

说实话，做这个工具的起因很简单——真的受够了每次都要拿计算器算。

作为一名自由职业的前端开发者，经常会拿到以375px为基准制作的设计稿，上面密密麻麻标注着「这段文字18px」「这里的间距24px」之类的数值。直接用px写虽然能跑，但屏幕宽度一变，布局立刻就崩了。所以把px换算成vw、让元素能根据屏幕宽度相对缩放，基本是每个前端工程师都会经历的一步。

问题在于，vw值 = px值 ÷ 设计稿宽度 × 100 这个公式本身很简单，但一份CSS文件里往往有几十处px数值，一个个用计算器算完再手动替换，实在是很痛苦的体力活，而且只要算错一位数字，布局就可能整个乱掉。我当时想「这种工具网上肯定有人做过吧」，结果找到的大多是只能转换单个px数值的计算器，很少有能直接粘贴整份CSS代码、一键批量转换的工具。

更麻烦的是，有些工具会不分青红皂白地把 border、box-shadow，甚至 @media 的断点条件也一起转换成 vw。border-width 按屏幕宽度缩放后会变得忽粗忽细，而像 @media (max-width: 768px) 这样的判断条件一旦被转成 vw，整个响应式设计逻辑就彻底乱套了。我真正想要的，是「批量转换没问题，但该排除的地方一定要排除干净」。

于是我干脆自己动手，为自己的日常工作做了这个工具：设计稿宽度可以自由设置，border、shadow、@media 相关的条件默认排除，还能直接读取整份CSS文件一键批量转换——这些正是我自己最需要的功能。如果同样为「px转vw太麻烦，不想再手动算」而烦恼的前端朋友们能因此省点事，那这个工具的初衷也就达到了。