CSS px ↔ rem 相互換算機
ローカル処理CSSの絶対ピクセル値(px)とルート基準の相対単位(rem)をルートフォントサイズに基づき相互変換します。
使い方と処理基準
上の入力欄に値を入力すると結果が自動で計算されます。各入力欄の説明と単位をご確認ください。
例: 寸法数値 = 32, 変換方向 = pxToRem, 基準ルートフォントサイズ (px) = 16 → 2
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
remはルート(html)の文字サイズの倍数です。標準16pxでは24px = 1.5remです。基準サイズを変えて計算できます。
CSS px ↔ rem 相互換算機の使い方
- 1値を入力変換するpxまたはremの値を入れます。
- 2方向・基準サイズpx → remまたはrem → pxを選び、htmlの文字サイズ(標準16)を決めます。
- 3結果をコピーCSSにそのまま貼り付けます。
活用例
24pxをremに
入力: 24px、基準 16px
結果: 1.5
1.5remをpxに
入力: 1.5rem、基準 16px
結果: 24
主な利用シーン
- デザインカンプのpx値をremベースのCSSに移すとき
- ユーザーが文字を大きくしてもレイアウトが追従するようにするとき
- デザインシステムの余白単位を整理するとき
よくある質問 (FAQ)
emとremの違いは?
remは常にhtmlの文字サイズ、emは親要素の文字サイズを基準にします。
htmlの文字サイズを62.5%にしています。
基準サイズに10を入れてください(16 × 62.5% = 10px)。
