CSS単位変換 — px・rem・em・pt・%
任意のルートフォントサイズで px・rem・em・pt・% を相互変換。値を入力すると全単位がライブ更新、結果を単位付きでコピーできます。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
em は rem と同様(ルートサイズ基準)として扱います。値をクリックすると単位付きでコピーします。
このツールについて
毎日のように使う px・rem・em・pt・パーセントといった CSS の単位を、自分で指定したルートフォントサイズを基準に相互変換します。基準サイズを設定し、いずれかの単位で値を入力すると、その等価な値がすべて瞬時に表示され、レスポンシブでアクセシブルなレイアウトづくりから当て推量をなくします。ピクセルから rem へのデザイン変換でも、文字サイズの可変指定でも、計算はブラウザ内で代わりに行われ、どこにも送信されません。
よくある質問
px・em・rem の違いは何ですか?
ピクセル(px)は固定された絶対単位です。em は現在の要素のフォントサイズを基準とするため、要素が入れ子になると値が積み重なっていきます。rem はページのルートフォントサイズを基準とするので、どこで使っても予測しやすい値になります。ポイント(pt)は印刷由来の単位で、一般的な 96 DPI ではおよそ 1.333 px に相当します。
なぜピクセルを rem に変換するのですか?
rem でサイズを指定すると、レイアウトが読者の選んだフォントサイズに合わせて拡大縮小するため、アクセシビリティとレスポンシブデザインの観点で有利です。ブラウザの既定の文字サイズを大きくすると、rem を基準にした余白や文字も一緒に大きくなりますが、固定ピクセルは変わりません。ピクセル値を、一般的には 16 px のルートサイズを基準に rem へ変換しておけば、全体を作り直さずにその柔軟性が得られます。
変換はサーバーで行われますか?
いいえ。計算は入力に合わせてすべてブラウザ内で実行されるため、入力した値がどこかにアップロード・記録・保存されることはありません。本ツールは、指定されたルートフォントサイズを使って単位間を瞬時に変換するだけで、ページを読み込んだ後はオフラインでも動作します。デザインに関する情報が端末の外に出ることはありません。