フロントエンド開発者なら誰もが経験する場面：デザインモックアップには 24px と書いてあるのに、コードベースは rem を使っている。計算機を開いて16で割り、その1時間後にまた同じ計算をする——これをくり返すことになります。専用のCSS単位コンバーターがこの摩擦を完全に解消します。
CSS単位の全体像
CSSにはいくつかの単位タイプがあり、適切な単位を選ぶことがアクセシビリティとレスポンシブデザインに実際の影響を与えます。
px — 絶対ピクセル
ピクセルは最も直感的な単位です。font-size: 16px はちょうど16 CSSピクセルです。ただし「絶対」は誤解を招きます——CSSピクセルはデバイスピクセルではありません。Retinaディスプレイでは、1 CSSピクセルが2つ（以上）の物理ピクセルにマッピングされます。
pxを使う場面： ボーダー（border: 1px solid）、シャドウ、ユーザーフォント設定でスケールすべきでないもの。
rem — ルートem
1rem はルート <html> 要素のフォントサイズと等しい。デフォルトは 16px なので 1.5rem = 24px です。重要な利点：ユーザーがアクセシビリティのためにブラウザのフォントサイズを大きくすると、rem ベースのレイアウトが比例してスケールします。
html { font-size: 16px; } /* デフォルト */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */remを使う場面： フォントサイズ、スペーシング、レイアウトの寸法——ユーザーのアクセシビリティ設定を尊重すべきもの全般。
em — 親em
1em は現在の要素の親のフォントサイズと等しい。これは複合します：すでに 1.5em のコンテナ内の 1.5em フォントは 2.25rem の実効サイズになります。この複合動作は強力でもあり、エラーの原因にもなりえます。
.card { font-size: 1.25em; } /* 親が16pxなら20px */
.card .caption { font-size: 0.8em; } /* 16px (0.8 × 20) */emを使う場面： コンポーネント自身のフォントサイズに合わせてスケールすべき、コンポーネントローカルなスペーシング（例：ボタンのpadding）。
vwとvh — ビューポート単位
1vw はビューポート幅の1%；1vh はビューポート高さの1%。フルスクリーンレイアウト・ヒーローセクション・流体タイポグラフィに最適です。
.hero { height: 100vh; }
.headline { font-size: 5vw; }注意： iOS Safariのダイナミックツールバーは 100vh の動作に影響します。モバイル対応のフルスクリーンレイアウトには dvh（dynamic viewport height）を使用してください。
% — パーセンテージ
パーセンテージは親要素の対応する寸法に相対的です。width: 50% は親の幅の半分を意味します。
単位間の変換方法
基準値がわかれば計算は簡単です。
px → rem
rem = px / ルートフォントサイズデフォルトの 16px ルートで：
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 16 | 1 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
rem → px
px = rem × ルートフォントサイズpx → vw
vw = (px / ビューポート幅) × 1001440px のデザインビューポートで 240px の要素は 240/1440 × 100 = 16.67vw。
オンラインCSS単位コンバーター
手で計算する代わりに、ブラウザベースのツールを使用してください：
任意の単位（px・rem・em・vw・vh・pt・cm・mm・in）で値を入力すると、すべての他の単位での等価値が即座に表示されます。プロジェクトに合わせてルートフォントサイズとビューポートサイズを設定できます。
すべてがブラウザ内で実行されます——データは機器から外に出ません。
実践的なワークフロー
デザイン引き渡し
デザイナーはFigmaのデフォルトである px でスペックを提供します。スタイルトークンは rem を使用しています。コンバーターを使えば、スペーシングスケール全体を数秒でバッチ変換できます。
アクセシビリティ監査
ブラウザのフォントサイズを20pxに変更して、どの要素が壊れるかを確認してください。px でサイズ指定された要素はリフローしません——これが修正リストです。それらの値を rem に書き直す際に、コンバーターが時間を節約します。
clamp() によるレスポンシブタイポグラフィ
clamp() は最小値・推奨値・最大値の3つを取ります。単位の混在が一般的です：
font-size: clamp(1rem, 2.5vw, 2rem);2.5vw の推奨値を選ぶには：800px のビューポートでフォントを 20px にしたい場合、20/800 × 100 = 2.5vw を計算します。コンバーターはこの計算を即座に処理します。
rem vs em：使い分け
| シナリオ | 単位 |
|---|---|
| 本文テキスト | rem |
| 見出し | rem |
| ボタンのpadding（ボタンフォントに合わせてスケール） | em |
| カードのpadding（カードフォントに合わせてスケール） | em |
| グローバルスペーシングスケール | rem |
| メディアクエリのブレークポイント | em（ブラウザズーム互換性のため） |
スケーラブルなシステムのためのCSSカスタムプロパティ
ベース単位から導出されたCSS変数でスペーシングスケールを定義するのが最良のアプローチです：
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
}このシステムでは、html { font-size } を変更するだけでレイアウト全体がスケールします。CSS単位コンバーターは、デザインのピクセル値からスケールを構築するのに役立ちます。
まとめ
- フォントサイズとグローバルスペーシングには rem を使用——ユーザーのアクセシビリティ設定を尊重します。
- ローカルフォントサイズに合わせてスケールすべきコンポーネント内部のスペーシングには em を使用。
- ビューポート相対のレイアウトと流体タイポグラフィには vw/vh を使用。
- ボーダー・シャドウ・絶対にスケールすべきでない要素には px を使用。