FIRST CH TOOLS LOCAL PROCESSING — サーバー送信なし EN

FIRST CH TOOLS / 21 PX ⇄ REM / EM

PX ⇄ REM / EM 単位変換＆フォントスケール表

ルートのフォントサイズを決めて、px・rem・em のどの欄に入れても残りが即時に決まります。12px〜64px のよく使うサイズを並べたスケール表はCSS変数やSCSSとしてそのままコピーでき、CSSを貼り付ければ px→rem の一括変換もできます。

基準を決めて、どの欄に入れても即時換算されます

px
px
rem
rem
em
em
よく使う値
24
px
1.5
rem（ルート基準）
1.5
em（親要素基準）
18
pt（印刷CSS用）
CSSに貼る形

    
    
  
    

  
    計算はこのページの中だけで行われ、入力がブラウザの外へ出ることはありません。URLパラメータで直接呼び出せます: /px-rem/?px=24 ／ /px-rem/?rem=1.5&root=10
    
  
    

  

  

  
    
    
    How to Use
    
    
      
      
    1. ルートのフォントサイズを決めるふつうは 16px（ブラウザの既定）のままで構いません。html { font-size: 62.5% } を使っているなら 62.5% ボタンを押すと基準が10pxになります。
      2. 
      
    2. px・rem・em のどれかに入れる1つの欄に入力すると、残りの2つとpt・CSSスニペットが即時に決まります。「よく使う値」のボタンからも入れられます。
      3. 
      
    3. 表やCSSごとコピーする「スケール表」タブで12px〜64pxの一覧をCSS変数やSCSSとして書き出せます。既存のCSSを貼って px→rem をまとめて置き換えることもできます。
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    rem はルート（html要素）のフォントサイズが基準、em は親要素のフォントサイズが基準です。ブラウザの既定は16pxなので、何も指定しなければ 1rem = 16px。24px ÷ 16 = 1.5rem のように、pxを基準サイズで割った値がremになります。
    
    
    pxで書くと、閲覧者がブラウザで変えた文字サイズが効きません。設定で既定の文字サイズを20pxにしている人が見ても、font-size: 14px と書かれた文字は14pxのままです。remで書いておけば同じ比率で拡大されるため、フォントサイズ・行間・要素の余白はremで指定するのが基本になります。ズーム（ブラウザの拡大）はpxでも効きますが、文字サイズの設定はこれとは別のしくみです。
    
    
    
      
    62.5%テクニックには副作用がある
    
      
    html { font-size: 62.5% } と書くとルートが10pxになり、1.4rem = 14px と暗算しやすくなります。よく使われる書き方ですが、書いたremがすべてブラウザ既定の8分の5になるため、文字を大きく設定している閲覧者の拡大幅が意図より小さくなります。ルートは 100% のままにして、このツールで換算した値を書く方が安全です。
    
    
    
    
    
      
    emは入れ子にすると掛け算になる
    
      
    0.9em を指定した要素の中でさらに 0.9em を指定すると、外側から見て 0.81倍 になります。リストの入れ子やコンポーネントの重ね方で文字がじりじり小さくなるのはこれが原因です。フォントサイズはrem、その要素の中での相対的な余白（padding・margin・letter-spacing）はem、という使い分けが扱いやすくなります。
    
    
    
    
    
      
    割り切れない値は丸める
    
      
    ルートが16pxのときは16が2の4乗なので、13px = 0.8125rem のようにどの整数pxも割り切れます。ルートを14pxや15pxにすると 16 ÷ 14 = 1.142857… のように循環し、どこかで丸めることになります。このツールは既定で小数6桁まで見て末尾の0を落とし、割り切れたかどうかを結果の下に出します。ブラウザは内部でより高い精度を保つので、小数3〜4桁もあれば見た目の差は生じません。
    
    
    
    
    
      
    罫線の1pxはpxのまま残す
    
      
    rem化するとルートのサイズによって罫線が 0.9px や 1.1px になり、環境によって太さがばらついたり消えたりします。1pxの罫線はpxのままにしておくのが無難です。「CSSまとめて変換」タブの「1pxはそのまま残す」を有効にしておくと、絶対値が2px未満の値は変換されません。
    
    
    
    
    
      
    メディアクエリの条件はpxで書く
    
      
    ブレークポイントは端末の幅で決めることが多く、ルートのフォントサイズに連動させたくない場面がほとんどです。@media の条件をremで書くと、閲覧者の文字サイズ設定でブレークポイント自体が動きます。既定では @media や @container の条件部分を変換対象から外しています（ブロックの中の宣言は変換します）。
    
    
    
    
    
      
    ptは印刷用の単位
    
      
    CSSの 1pt は1/72インチ、1px は1/96インチなので 1px = 0.75pt です。画面向けのCSSでptを使う理由はありませんが、印刷用スタイルやWord・PDF・デザインツールとの突き合わせでpt表記が必要になることがあるため、結果に併記しています。
    
    
    
  
    

  
    
    
    From AI Agents
    
    
    この換算ロジックは、MCP（Model Context Protocol）サーバー @first-ch/tools-mcp の px_rem_convert ツールとしても提供しており、ブラウザを使わずAIエージェントから直接呼び出せます。CSSファイルのパスを渡して一括変換・書き出しもできます。導入方法の詳細は AIエージェントからの使い方 を参照してください。
    
    
    導入
    
    
    claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
    
    
    呼び出し例
    
    
    # 24px は何remか（ルート16px）
px_rem_convert(value=24)

# ルートを10pxにして 1.4rem を px へ
px_rem_convert(value=1.4, unit="rem", root=10)

# CSSをまるごと px → rem（1px未満の罫線と @media の条件は残す）
px_rem_convert(css="a{padding:24px;border:1px solid red}")

# CSSファイルを読んで変換し、別ファイルへ書き出す
px_rem_convert(path="/tmp/style.css", outputPath="/tmp/style.rem.css", minPx=2)
    
  
    

  
    
    
    Other Tools