CSS単位コンバーター
数値を入力してpx・rem・em・vw・vh・%を即変換。コピーしてそのまま使えます
元の単位
- そのまま
- ÷ 16（ルートフォントサイズ）
- ÷ 16（ルートフォントサイズ）
em は親要素のフォントサイズ基準（ここではルートフォントサイズを使用）
- ÷ 1440 × 100
- ÷ 900 × 100
- ÷ 1000（親要素サイズ）
/* プロパティ名は用途（width, font-size, padding など）に合わせて変更してください */
width: 200.000px;
width: 12.500rem;
width: 12.500em;
width: 13.889vw;
width: 22.222vh;
width: 20.000%;使い方
- 上の入力フィールドに変換したい数値を入力しよう（例: 200）。
- 元の単位ボタン（px / rem / em / vw / vh / %）をクリックして、入力値の単位を選ぼう。
- 各行の 📋 ボタン で1つずつコピーするか、 「📋 CSSをコピー」 ボタンで全部まとめてコピーしよう！
- ルートフォントサイズやビューポートサイズを変えたいときは 「基準値の設定」を開いて調整できるよ。
px だけで書くと何が困る？
px は「画面上の1ドット」で分かりやすいけど、ユーザーがブラウザのフォントサイズを変更しても px 指定の文字は大きくならない。 rem を使えばルートフォントサイズに連動するから、アクセシビリティに配慮したサイトが作れる。
でも「16px は何 rem？」「画面幅の半分は何 vw？」を毎回計算するのは面倒。 このコンバーターに数値を入れれば、6種類の単位に一括変換される。
こんなとき使おう
- デザインカンプが px 指定のとき — Figma のデザインは px で書かれているけど、CSSでは rem を使いたい。ここで変換してコピー。
- レスポンシブ対応で vw を使いたいとき — 「画面幅 375px のとき 16px のフォントは何 vw？」を即計算。
- calc() の式を組み立てるとき — 「100vw - 240px」のような混在計算の前に、各単位の実ピクセル値を確認できる。
よくある質問
- Q. rem と em の違いは？
- rem はルート要素（html）のフォントサイズ基準。em は親要素のフォントサイズ基準。ネストすると em は掛け算で大きくなるので、基本は rem を使う方が安全。
- Q. vw と % の違いは？
- vw はビューポート（画面）の幅基準。% は親要素の幅基準。親が画面幅いっぱいなら同じだけど、親が狭い場合は結果が変わる。