CSS 単位変換（px・rem・em・vw・pt など）
CSS の長さを px、rem、em、%、vw、vh、vmin、vmax、pt、pc、in、cm、mm、Q の間で変換します。ルートのフォントサイズとビューポートも指定でき、すぐに結果が出ます。
1rem絶対単位は CSS の定義に従います: 1in = 96px = 2.54cm = 72pt = 6pc、1Q = 0.25mm。rem はルート、em と % は親要素のフォントサイズ（font-size と同じ扱い）、vw/vh/vmin/vmax はビューポートを基準にします。結果は小数第 4 位で丸めます。
CSS 単位変換とは？
CSS の長さを、絶対単位（px、pt、pc、in、cm、mm、Q）と相対単位（rem、em、%、vw、vh、vmin、vmax）の間で変換します。ルートのフォントサイズ、親要素のフォントサイズ、ビューポートのサイズを設定すると、実際の環境に合わせて相対単位が計算され、すべての単位が一度に表示されます。
CSS 単位変換の使い方
- 値 を入力し、変換元 と 変換先 の単位を選びます。
- ルートのフォントサイズ（rem 用）、親要素のフォントサイズ（em と % 用）、ビューポートの幅と高さを調整します。
- メインの結果をコピーするか、任意の単位のカードをクリックしてその値をコピーします。
例
24px (root 16px)
1.5rem · 18pt · 1.25vw (1920px viewport)
CSS 単位変換を使うべき場面
px のデザイン仕様を rem ベースの CSS にするときや、特定の画面での vw の値がどのくらいかを確認するときに使います。% が em と同等なのは font-size の場合だけです。width や padding の % は包含ブロックを基準にしますが、このツールにはそれが分かりません。
CSS 単位変換の仕組み
すべて CSS ピクセルを経由して変換されます。絶対単位は CSS の固定比率を使います。1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc、1Q = 0.25mm です。rem はルートのフォントサイズを、em は親要素のフォントサイズを掛け、% は親要素のフォントサイズに対する割合（font-size としての解釈）で、vw/vh はビューポートの幅/高さの 1%、vmin/vmax は短い辺/長い辺を使います。結果は小数第 4 位に丸められます。
一般的な使用例
- デザインシステムの px のサイズを rem に変換する
- 幅 1440px のノート PC で 5vw がどのくらいの大きさか確認する
- pt や mm の印刷サイズを CSS の px に変換する
- 親のフォントが 20px のコンポーネント用に em の値を計算する
よくある質問
なぜ 1rem は 16px なのですか？
ブラウザーはルートのフォントサイズを既定で 16px にしています。CSS で html { font-size: 62.5% } としている場合は、ルートのフォントサイズに 10 を入力してください。
rem と em の違いは何ですか？
rem はルート（html）のフォントサイズが基準で、em は親要素のフォントサイズが基準なので、入れ子にすると累積します。
cm や in は画面上で実寸になりますか？
いいえ。CSS では 1in = 96px と固定されているため、ほとんどの画面で CSS の 1 センチは実際の 1 センチとは一致しません。印刷では正確です。