CSS 単位変換器

CSS単位 px・rem・em・vw を即座に相互変換。ルートフォントサイズ・ビューポート幅を設定可能。ブラウザ内で処理、無料。

ブラウザ内で処理
データはブラウザ外に出ません
無料 · 登録不要

設定

ルートフォントサイズ (px) 設定を開き、プロジェクトのルートフォントサイズをピクセルで入力します。既定値は16pxです。rem と em の両方に使用し、空欄またはゼロなら16pxで計算し、負の値はエラーになります。

ビューポート幅 (px) 対象のビューポート幅をピクセルで入力します。既定値は1920pxで、390pxのスマートフォン画面なら390にします。1vwはこの幅の1％です。空欄またはゼロなら1920pxで計算し、負の値はエラーになります。

値 16 や 2.5 のように単位を付けず数値を入力します。結果は入力に合わせて更新され、負数とゼロにも対応します。px、rem、em、vw は単位メニューで選びます。

結果結果には単位が付き、有効数字6桁に丸められます。各結果のコピーで値と単位をコピーできます。強調された行は変換元の単位です。

rem

例・詳しい説明・よくある質問実際の出力つきの例、ほかのツールとの違い、よくある質問。

よく使う変換の例

デフォルト設定（ルートフォントサイズ16px、ビューポート1920px）の場合：

16px = 1rem = 1em = 0.833333vw
1rem = 16px
100vw = 1920px = 120rem

各単位の使いどころ

px — CSS ピクセルで、画面の物理ピクセルとは別物です。2 倍の画面では 1 CSS ピクセルが縦横 2×2 の物理ピクセルを使い、ページを拡大すると大きくなります。ブラウザーの文字サイズ設定には追従しません。ボーダーや影などの細部に向きます。
rem — ルートのフォントサイズを px で固定していなければ、ブラウザーの文字サイズ設定に連動します。アクセシブルなデザインでフォントサイズや余白に推奨。
em — 要素自身のフォントサイズが基準です（font-size に使う場合は親要素が基準）。コンポーネント内でサイズを相対的に決めるときに便利です。
vw — ビューポート幅を基準にします。流動的なタイポグラフィや全幅レイアウトに適します。

変換式

ルートフォントサイズ 16px、ビューポート幅 1920px（既定値）の場合：

rem = px ÷ root font size          24px ÷ 16 = 1.5rem
px  = rem × root font size         1.5rem × 16 = 24px
vw  = px ÷ viewport width × 100    24px ÷ 1920 × 100 = 1.25vw
px  = vw × viewport width ÷ 100    1.25vw × 1920 ÷ 100 = 24px

例：デジタル庁デザインシステムの 17px

デジタル庁デザインシステムのトークン（npm パッケージ @digital-go-jp/design-tokens 2.0.1 の dist/tokens.css）には、16px・18px のほかに --font-size-17: 1.0625rem; という中間のサイズがあります。デザインカンプに「17px」とあるときに rem で何と書けばよいかは、単位を px にして 17 を入力すれば分かります。

結果は 1.0625rem で、トークンの値と一致します。逆にトークンの 1.0625rem が何ピクセルかを確かめるなら、単位を rem にして 1.0625 を入力します。さらに「設定」でビューポート幅を 360 にすると、幅 360px のスマートフォン画面での vw も出ます。

17px、4.72222vw です。vw は 6 桁に丸めた値なので、CSS にそのまま書くと元の 17px とごくわずかにずれます。文字サイズを vw だけで書くと画面幅に比例して際限なく大きく・小さくなるため、上限と下限を付けたいときは CSS clamp() 計算機を使ってください。

em で思わぬ結果になる理由

このツールは em を rem と同じく、ルートフォントサイズ基準で換算します。実際のページでは、font-size に指定した em は親要素のフォントサイズが基準なので、入れ子にすると掛け算で大きくなります（MDN）。

html  { font-size: 16px; }
.card { font-size: 1.25em; }   /* 20px */
.card .title { font-size: 1.25em; }   /* 25px: 1.25 × 20px */
.card .title small { font-size: 1.25em; }   /* 31.25px */

rem にすれば、どの階層も 20px のままです。ボタン内の余白のように自分の文字サイズに合わせたいものには em、フォントサイズやレイアウトの余白には rem を使います。

制限事項

em は rem として換算します。 要素のフォントサイズがルートと同じ場合にだけ正しい値になります。
対応単位は 4 つだけです： px、rem、em、vw。vh、%、pt、ch は変換しません。
vw は入力した幅で計算します。 既定の 1920px はデスクトップの幅です。スマートフォンなら 360 や 390 など、対象の幅を入れてください。
結果は有効数字 6 桁に丸めます（例：1920px で 16px は 0.833333vw）。
vw はスクロールバーを含みます。 デスクトップのブラウザーで通常のスクロールバーが出ていると、100vw は縦スクロールバーを含むウィンドウ幅なので、コンテンツ領域より広くなり横スクロールバーが出ることがあります。
値の欄は数字だけです。 16px のように単位付きで入力しても読み取りません。単位はメニューで選びます。ルートフォントサイズやビューポート幅を空欄や 0 にすると、それぞれ 16px と 1920px で計算します。負の値を入れるとステータスにエラーが出て、結果は空になります。

FAQ

対応しているCSS単位は何ですか？

px・rem・em・vwに対応しています。任意の単位で値を入力すると、4種類すべての変換結果が即座に表示されます。

remはどのように計算されますか？

rem（ルートem）はルート要素のフォントサイズを基準にします。デフォルトは16pxなので、1rem = 16pxです。「設定」からルートフォントサイズを変更できます。

vwはどのように計算されますか？

vwはビューポート幅の1%です。ビューポート幅1920pxの場合、1vw = 19.2pxです。対象レイアウトに合わせてビューポート幅を変更してください。

rem と em の違いは何ですか？

rem は常に文書のルート要素のフォントサイズが基準です。em はその要素自身のフォントサイズが基準なので、入れ子にすると値が変わります。このツールは簡略化して em を rem と同じ（どちらもルートフォントサイズ基準）として換算します。

データはサーバーに送信されますか？

いいえ。変換はブラウザーのタブ内で行い、入力した数値をサーバーへ送ることも、ブラウザーのストレージに保存することもありません。ページのアクセス解析が記録するのは利用イベント（ツール名と、変換・コピーという操作の種類）だけで、数値は含みません。