CSS単位変換ツール
単位
設定
px
16
rem
1
em
1
%
100
vw
0.8333
vh
1.4815
svw
0.8333
svh
1.4815
lvw
0.8333
lvh
1.4815
dvw
0.8333
dvh
1.4815
使い方
数値を入力し、変換元のCSS単位を選択してください。すべての単位に即座に変換されます。設定パネルでルートフォントサイズ、親要素フォントサイズ、大／小ビューポートサイズを調整すると、プロジェクトの環境に合わせた正確な変換が可能です。
単位リファレンス
CSSには絶対単位（px）と相対単位があります。ビューポート単位はブラウザUIの表示状態に応じて4種類（v / sv / lv / dv）に分かれています。
- px ピクセル — 絶対単位
- デバイス非依存の1ピクセル。すべての単位は内部的にpxを経由して変換されます。
- rem rem — ルート要素のフォントサイズ基準
- 1remは<html>要素のフォントサイズ（既定16px）に等しい値。グローバルなタイポグラフィやスペーシングに最適です。
- em em — 親要素のフォントサイズ基準
- 1emは親要素のフォントサイズに等しい値。ネストすると値が複合するため、コンポーネント内部の相対サイズに向いています。
- % パーセント — 親要素基準
- font-sizeでは親要素のフォントサイズに対する相対値。width/heightでは親要素の計算値に対する相対値です。
- vw vw — ビューポート幅
- 1vwはビューポート幅の1%。最近のブラウザではvwはlvw（大ビューポート）と同じ値になります。
- vh vh — ビューポート高さ
- 1vhはビューポート高さの1%。最近のブラウザではvhはlvhと同じ値になります。
- svw svw — 小ビューポート幅
- 1svwはブラウザUIをすべて表示している状態の最小ビューポート幅の1%。スクロール中も値が変わらず安定します。
- svh svh — 小ビューポート高さ
- 1svhはアドレスバーやツールバーを表示した状態の最小ビューポート高さの1%。モバイルで常に画面内に収めたいレイアウトに最適です。
- lvw lvw — 大ビューポート幅
- 1lvwはブラウザUIが折りたたまれた状態の最大ビューポート幅の1%です。
- lvh lvh — 大ビューポート高さ
- 1lvhはブラウザUIが非表示の状態の最大ビューポート高さの1%。フルブリードのヒーローセクションに便利です。
- dvw dvw — 動的ビューポート幅
- 1dvwは現在のビューポート幅の1%で、ブラウザUIの状態変化に応じてリアルタイムに更新されます。
- dvh dvh — 動的ビューポート高さ
- 1dvhは現在のビューポート高さの1%で、アドレスバーの表示・非表示に合わせてアニメーションします。モバイルにおけるvhのモダンな代替です。
変換式
すべての変換は中間単位としてpxを経由します:
- px → px：値そのまま
- rem → px：値 × ルートフォントサイズ
- em → px：値 × 親要素フォントサイズ
- % → px：(値 × 親要素フォントサイズ) ÷ 100
- vw / lvw / dvw → px：(値 × 大ビューポート幅) ÷ 100
- svw → px：(値 × 小ビューポート幅) ÷ 100
- vh / lvh / dvh → px：(値 × 大ビューポート高さ) ÷ 100
- svh → px：(値 × 小ビューポート高さ) ÷ 100
主な用途
- デザイナーのピクセル指定をレスポンシブなremやem値に変換する。
- vh・lvh・dvhを使ったフルスクリーンのヒーローセクションを設計する。
- svhでアドレスバーに切られないモバイルUIを構築する。
- レガシーCSSコードベースをpxからremに移行してアクセシビリティを改善する。
- デザインシステム全体で一貫したスペーシングスケールを確認する。
ヒント
- 多くのブラウザのデフォルトルートフォントサイズは16pxですが、ユーザーが設定で変更できます。
- グローバルなサイジングにはremを、コンポーネント内の相対サイズにはemを使いましょう。
- モバイルのフルスクリーンレイアウトにはvhよりdvhが適しています。ブラウザUIの表示・非表示に追従します。
- アドレスバー表示時にも常に画面内に収めたいレイアウト（下部固定バーなど）にはsvhを使います。
- em単位の深いネストは各レベルで値が複合するため、避けることをおすすめします。
プライバシー
すべての変換はブラウザ内で完結します。データがサーバーに送信されることはありません。