CSS px ↔ rem 相互換算機

CSS px ↔ rem 相互換算機

ローカル処理

CSSの絶対ピクセル値(px)とルート基準の相対単位(rem)をルートフォントサイズに基づき相互変換します。

使い方と処理基準

上の入力欄に値を入力すると結果が自動で計算されます。各入力欄の説明と単位をご確認ください。

例: 寸法数値 = 32, 変換方向 = pxToRem, 基準ルートフォントサイズ (px) = 16 → 2

ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。

remはルート(html)の文字サイズの倍数です。標準16pxでは24px = 1.5remです。基準サイズを変えて計算できます。

CSS px ↔ rem 相互換算機の使い方

  1. 1
    値を入力変換するpxまたはremの値を入れます。
  2. 2
    方向・基準サイズpx → remまたはrem → pxを選び、htmlの文字サイズ(標準16)を決めます。
  3. 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)。

このツールへのご意見・ご要望はありますか? 提案・お問い合わせ →