入力
16px（ルートのフォントサイズが16pxの場合）
出力
1rem / 1em（親要素のフォントサイズも16pxの場合）
デザインツール
CSS 単位変換 - px、rem、em、vw
px、rem、em、pt、vw、vh、% の相互変換を行えます。root font size、親要素 font size、viewport size を設定し、レスポンシブ対応やデザインから実装への引き継ぎに活用できます。
CSS単位変換
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSS 単位変換
利用シーン
- デザインツールの px 値を rem/em に変換する
- viewport size から vw/vh を見積もる
- 共通 root font-size 基準に合わせて spacing を調整する
使い方
- 値を入力し、元の単位を選択する
- root font size、親要素 font size、viewport の基準値を設定する
- 各単位の結果を確認し、必要な値をクリックしてコピーする
入出力サンプル
FAQ
rem と em の違いは何ですか？
rem は root font size 基準、em は親要素 font size 基準です。このツールでは入力した root と親要素の値を使って換算します。
% は何に対する割合ですか？
パーセンテージは文脈依存です。このツールでは入力した基準値から近似計算するため、本番適用前に実際のレイアウトで確認してください。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS Clamp ジェネレーター
CSS Clamp ジェネレーター - 流体的レスポンシブサイズ
最小・最大 viewport 幅と目標サイズ範囲から、font size、spacing、そのほか length を viewport に応じて伸縮させる clamp() 式を計算できます。
CSS clamp Responsive
ピクセル定規
ピクセル定規 - 画面サイズと目盛り表示
ページ上に horizontal または vertical の pixel ruler を描画できます。長さや tick 間隔を調整し、window size と device pixel ratio を見ながら layout や mockup 上の CSS pixel を確認できます。
Pixels Ruler Measure
アスペクト比計算機
アスペクト比と比例サイズ計算機
ブラウザでアスペクト比を計算してロックしてください。幅と高さから比率を導き出すか、片側を変えてもう片側は比例したままにします。一般的なプリセットやトリミング、動画フレーム、レスポンシブレイアウトのプレビューが含まれています。
比率 サイズ 設計