AZ Tools

CSS 単位コンバーター

変換

任意の CSS 単位で値を入力すると、他のすべての単位に即座に変換します。rem 用のルートフォント(既定 16 px)、em / % 用の親フォント、vw / vh 用のビューポート幅・高さをカスタマイズ可能。デザイン値を Tailwind / CSS に落とし込む時、レスポンシブフォントの整合確認、デフォルト 16 px でない環境で 1rem が何 px か確認する時に便利。

ベースサイズ(ルート・親・ビューポート)

全単位

  • px16.000
  • rem1
  • em1
  • pt12.000
  • vw1.1111
  • vh1.7778
  • %100.00

使い方

  1. 値と単位(px・rem・em・pt・vw・vh・%)を入力。
  2. 他の単位がリアルタイムで更新されます。
  3. 「ベースサイズ」パネルを開いてルート / 親フォントやビューポートを変更可能。
  4. 単位の横のコピーボタンで値をコピー。

よくある質問

rem と em の違いは?
rem は文書ルート(html font-size、既定 16 px)基準、em は親要素基準。親がルートと同じサイズの場合だけ等しくなります。
なぜ 1pt = 1.333px?
CSS 仕様:1 in = 96 px、1 pt = 1/72 in → 1 pt = 96/72 ≈ 1.333 px。
vw / vh は正確?
ベースサイズパネルで入力したビューポート幅・高さを使います。既定 1440×900 は一般的なデスクトップ基準なので、デザインキャンバスに合わせて変更を。
% は?
フォントサイズ文脈では親フォントサイズ基準(em と同じ)。他の CSS プロパティでは containing block 基準で挙動が変わります。

関連ツール