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
使い方
- 値と単位(px・rem・em・pt・vw・vh・%)を入力。
- 他の単位がリアルタイムで更新されます。
- 「ベースサイズ」パネルを開いてルート / 親フォントやビューポートを変更可能。
- 単位の横のコピーボタンで値をコピー。
よくある質問
- 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 基準で挙動が変わります。