px ⇔ rem ⇔ em ⇔ % ⇔ pt をフォントサイズ基準で即時換算
| px | rem | pt |
|---|
base = 16px を基準に計算しています。base を変えると再計算されます。
このツールは、Webデザインやコーディングで頻繁に必要になる CSS のフォントサイズ単位「px・rem・em・%・pt」を相互に即時変換する無料ツールです。変換したい数値と単位を入力するだけで、残りすべての単位への換算結果がリアルタイムに表示されます。ルートフォントサイズ（base、既定16px）と親要素フォントサイズを自由に変更できるため、実際のサイトの設定に合わせた正確な px rem 変換が行えます。インストールや会員登録は不要で、入力内容はサーバーに送信されず、すべての処理がブラウザ内で完結します。
使い方はかんたんです。まず「変換したい値」に数値を入力し、その単位を px / rem / em / % / pt から選びます。次に、必要に応じて base（rem の基準）と parent（em・% の基準）を調整します。入力を変えるたびに換算結果が更新され、各単位の値の横にあるコピーボタンで CSS にそのまま貼り付けられます。下部にはよく使う 12・14・16・18・24・32px の rem 換算早見表も用意しています。
本ツールは入力値をいったん px に正規化し、そこから各単位を算出します。基本となる関係式は次のとおりです。rem = px ÷ base、em = px ÷ parent、% = em × 100、pt = px × 0.75。逆方向は px = rem × base、px = em × parent のように基準値を掛けて戻します。
CSS のフォントサイズ単位は「絶対単位」と「相対単位」に大別されます。px と pt は絶対単位で、基準に依存しない固定サイズです。一方 rem・em・% は相対単位で、何らかのフォントサイズを基準に大きさが決まります。rem はルート要素（html）を基準とするため一貫していて予測しやすく、em と % は親要素を基準とするため入れ子で伸縮します。
| 単位 | 種類 | 基準 | 換算式（px基準） |
|---|---|---|---|
| px | 絶対 | なし（ピクセル） | px |
| rem | 相対 | ルート（html） | px ÷ base |
| em | 相対 | 親要素 | px ÷ parent |
| % | 相対 | 親要素 | (px ÷ parent) × 100 |
| pt | 絶対 | 1/72 インチ | px × 0.75 |
アクセシビリティやレスポンシブ対応を重視するなら、フォントサイズには rem を使うのが主流です。ユーザーがブラウザのフォント設定を変えたときにサイト全体が追従し、拡大縮小が破綻しにくいためです。em はボタンの内側余白（padding）やアイコンサイズなど、その要素のフォントサイズに連動させたい箇所で活躍します。px は境界線（border）など固定したい細部で、pt は印刷用スタイルシート（@media print）で使われます。用途に応じて px rem 変換を使い分けましょう。
もっともよく使うのが px から rem への変換です。base が 16px のとき、代表的な値は以下のように換算されます。デザインカンプが px 指定でも、この対応表を使えばフォントサイズ換算がすぐに済みます。
| px | rem（base 16px） | 用途の目安 |
|---|---|---|
| 12px | 0.75rem | 注釈・キャプション |
| 14px | 0.875rem | 補足テキスト |
| 16px | 1rem | 本文（既定） |
| 18px | 1.125rem | やや大きい本文 |
| 24px | 1.5rem | 小見出し |
| 32px | 2rem | 見出し |
html{font-size:62.5%} と指定すると 16px の 62.5% で 1rem = 10px になり、px から rem を暗算しやすくなります（20px = 2rem など）。この手法を使う場合は、本ツールの base を 10 に変更すると、その環境での換算結果を確認できます。