CSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）

CSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）の使い方

1. 1テキストを入力またはペーストします
2. 2「変換する」ボタンをクリックします
3. 3結果を確認してコピーします

良いCSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）の判断基準

px から rem への移行や、デザインカンプの px 値を CSS に落とし込むときに使う変換ツールです。変換結果をコピーする前に、下の基準で「前提となる基準値が実環境と合っているか」を確認すると、貼り付けた後のサイズずれを防げます。

• root font-size の前提を実環境と合わせたか

  rem は root 要素（html）の font-size を基準に計算されます。プロジェクトの CSS で html の font-size を 16px 以外に変更している場合、ツール側の基準値も同じ値に設定しないと、変換結果が実際の表示とずれます。まず自分のプロジェクトの root font-size を確認してから変換します。

• px と rem の使い分けの方針を決めているか

  一般に、font-size や余白などユーザー設定に応じてスケールしてほしい値は rem、border の太さなど絶対値で固定したい値は px が使われます。変換する前に「この値はスケールすべきか、固定すべきか」を考えると、機械的に全部 rem 化して細部が崩れる事態を避けられます。

• em の場合は親要素の font-size を確認したか

  em は親要素の font-size 基準なので、同じ em 値でも置く場所によって実際のサイズが変わります。変換時に設定した親要素の font-size が、実際にそのスタイルを適用する要素の親と一致しているかを確認します。

• vw / vh はどの画面幅を想定した値か明確か

  vw / vh はビューポートのサイズで実寸が変わる単位です。変換結果の px 値は「設定したビューポート幅でのサイズ」でしかないため、モバイルとデスクトップの両方の幅で値を確認してから採用します。

• 小数点以下の丸め方を確認したか

  px から rem への変換では割り切れない値（例: 20px ÷ 16 = 1.25rem は割り切れますが、15px ÷ 16 = 0.9375rem のような細かい値）が出ます。桁数の長い値をそのまま使うか、キリのいい値に寄せるかをプロジェクトの方針として決めておくと、コードの一貫性が保てます。

• 変換後の値を実際のブラウザで確認したか

  計算上は正しくても、適用先の要素に別のスタイルが効いていて見た目が想定と違うことはよくあります。変換した値を本番コードに入れる前に、実際のブラウザで表示を確認します。

ありがちな失敗例（NG → 改善）

「20px は rem でいくつ」を毎回手計算していた人向けの CSS 単位変換

CSS で「20px は rem でいくつ？」「2.5rem は em で？」「100vw は px で？」を毎回手計算するのは面倒。さらに root font-size を 14px に変更している場合 / 親要素 font-size が違う場合 / ビューポート幅でレスポンシブ確認したい場合は、計算式が複雑になります。本ツールは 7 単位（px / rem / em / vw / vh / pt / %）をまとめて相互変換します。root font-size・親要素 font-size・vw・vh・親要素サイズの 5 つの基準値は自由に設定できます。すべての単位値を一画面で同時確認 + ワンクリックコピーで CSS 実装が即終わります。

7 単位の特徴と使い分け

【px（ピクセル）】絶対指定。border / 細い線 / 印刷物ベースの絶対値で使う。デバイス独立性なし。

【rem】root 要素（<html>）の font-size 基準。通常 1rem = 16px。アクセシビリティ最強。font-size / margin / padding / gap に。

【em】親要素の font-size 基準。階層で値が伝播するため line-height / アイコンサイズ / 微調整に。

【vw】ビューポート幅 1%（1440px 画面なら 1vw = 14.4px）。Hero タイトル・フルスクリーン UI に。

【vh】ビューポート高 1%。フルハイトレイアウトに。

【pt（ポイント）】1pt = 1/72 inch ≒ 1.333px。印刷物用。Web では通常使わない。

【%】親要素サイズ基準。width / height で使う。

rem 単位推奨の理由（アクセシビリティ）

【ユーザー設定対応】ユーザーがブラウザ設定（Chrome / Safari の「フォントサイズ」等）で root font-size を変更した時、rem 単位ならフォント・余白も一緒にスケールする。px だと固定で変わらない。

【WCAG 2.2 SC 1.4.4】「テキストサイズ変更 200% で正常動作」要件 → rem が満たしやすい。

【ズーム対応】Ctrl + / -（ブラウザズーム）でも rem は適切にスケール。

【メディアクエリ rem 化】@media (min-width: 48rem) のように rem 単位を使うとユーザー設定影響を受ける（最近の推奨パターン）。

16px の 7 単位一括変換と、root font-size を 10px に変えた実処理結果

編集部で本ツールを実際に操作し、画面の表に出た値をそのまま書き写しました。計算はブラウザの中だけで完結し、外部の AI には送られていません。

【1. 16px を 7 単位へ一括変換（基準値は既定のまま）】 入力は数値 16、変換元単位 px。基準値は既定の root font-size 16px、親要素 font-size 16px、ビューポート幅 1440px、ビューポート高 900px、親要素サイズ 800px です。表に並んだ値は、px が 16、rem が 1、em が 1、vw が 1.1111、vh が 1.7778、pt が 12、% が 2 でした。各行は「単位／その単位の説明／数値／CSS にそのまま貼れる値／コピー」の並びで、vw の行なら「vw／ビューポート幅 1%／1.1111／1.1111vw／コピー」と表示されます。vw と vh と % だけ中途半端な数字に見えるのは、既定の基準値（1440 / 900 / 800）で割った結果だからです。

【2. root font-size だけ 10px に変えた場合】 入力値 16px はそのままで、基準値の root font-size を 10 に変更すると、rem の行が 1.6 に変わりました（16 ÷ 10）。rem 以外の行は root font-size を参照しないため、値は動きません。html の font-size を 62.5%（10px 相当）にしているプロジェクトで、この欄を 16 のまま使うと、計算そのものは正しくても実表示と 1.6 倍ずれます。基準値を実環境に合わせるのが先で、変換はその後です。

-16px を入れて分かった単位変換のクセと、変換元単位が 7 択で固定されている限界

【負の値もそのまま計算する】-16 を px として入れると、px が -16、rem が -1、em が -1、vw が -1.1111、vh が -1.7778、pt が -12、% が -2 と、符号を保ったまま 7 単位すべてが計算されました。警告もエラーも出ません。CSS には負の値が通る指定（margin など）と通らない指定（width や padding など）がありますが、ツールはその区別をしません。負の値を扱うときは、貼り付け先のプロパティが負を受け付けるかを人が判断します。

【基準値を変えると全単位が即座に再計算される】root font-size・親要素 font-size・ビューポート幅・ビューポート高・親要素サイズの 5 つは、書き換えた瞬間に表全体へ反映されます。確定ボタンを押す手順はありません。

【丸めは小数点以下 4 桁】1.1111 や 1.7778 のように 4 桁で切られ、末尾の 0 は表示されません（1 は 1.0000 ではなく 1 と出ます）。割り切れない値をそのまま貼るか、キリのよい値へ寄せるかは、プロジェクトの方針として先に決めておくと CSS の表記が揃います。

【弱点】今回の 3 パターンでは、計算が壊れたり空欄になったりする箇所はありませんでした。構造上の限界は、変換元単位が 7 択のプルダウンで固定されている点です。ch や ex のような一覧に無い単位は、そもそも入力できません。今回確かめたのはこの 3 パターンで、どんな入力でも同じ結果になる保証ではありません。

【測れなかったこと】単位が 7 択で固定されているため、対応していない単位を入れたときの挙動は試せませんでした。

Figma の px 値・Tailwind 設定・既存 CSS の rem 移行で単位変換を開く場面

【1. Figma から受け取った px 値を実装する】デザイナーから渡った 24px のヘッダー高さのような値を、rem へまとめて直してから CSS に落とします。

【2. Tailwind CSS の設定を書く】theme.spacing や theme.fontSize で px と rem を行き来したいときに使います。

【3. レスポンシブの当たりを付ける】Hero タイトルの 48px はビューポート幅 1440 でいくつか、モバイルの 375 ではどうかを、基準値の欄を書き換えながら確かめます。

【4. em の実寸を確かめる】アイコンの 0.875em は親要素の font-size が 18px なら何 px になるか、といった親依存の計算に使います。

【5. 印刷物のデータを Web に持ち込む】Illustrator の 12pt を px に読み替える場面です。ただし pt の換算は 96 ÷ 72 の固定計算で、印刷の実寸を保証するものではありません。

【6. 古い CSS を rem へ寄せる】px を大量に使った既存 CSS を rem に統一する移行作業で、置き換え前後の値を一覧で確認します。

基準値の取り違えで rem がずれる場面と、この単位変換に向かない用途

旧版の本文にあった注意点を、実際に触って分かったことと合わせて整理します。

【基準値の取り違え】root font-size を 14px や 10px 相当に変えているプロジェクトで、ツール側を既定の 16 のまま使うと rem がずれます。実処理結果で見たとおり、基準を 10 にするだけで同じ 16px が 1rem から 1.6rem に変わります。

【em の伝播】em は親要素の font-size 基準なので、階層が深くなるほど値が掛け算で縮みます。0.875em を 3 階層重ねると元の 3 分の 2 ほどです。em は近い親 1 階層で使うほうが読めます。

【vw の使いすぎ】余白に vw を多用すると、スマホで詰まり、デスクトップで開きすぎます。上下限を付けたいときは clamp() と組み合わせます。

【pt と %】pt は印刷用で、Web では px か rem が無難です。% を height に使うと、親要素の height が auto のときに効きません。

【向かない用途】印刷の版下計算には向きません。pt の換算は 96 ÷ 72 の固定式で、用紙や解像度は見ていないためです。閲覧者の実機のビューポートを当てにした最終判断にも向きません。表の vw と vh は、あくまで自分が入力した基準値での値です。

【貼る前に確認する 3 点】1 つ目は、root font-size の欄が実プロジェクトと同じ数字か。2 つ目は、その値を rem にすべきか px で固定すべきか（border の 1px まで rem にする必要はありません）。3 つ目は、小数の桁をそのまま使うか丸めるか。この 3 点を見てからコピーします。

実装スニペット

【一般的なフォントサイズスケール（rem ベース）】 ```css html { font-size: 16px; /* 通常 */ }

h1 { font-size: 3rem; /* 48px */ } h2 { font-size: 2.25rem; /* 36px */ } h3 { font-size: 1.5rem; /* 24px */ } p { font-size: 1rem; /* 16px */ } small { font-size: 0.875rem; /* 14px */ } ```

【spacing スケール】 ```css .section { padding: 4rem 1rem; /* 64px 16px */ } .card { padding: 1.5rem; /* 24px */ } .gap-4 { gap: 1rem; /* 16px */ } ```