px→rem 変換
ルートが16 pxなら、16 pxは1 remで、0.5 remは8 pxです。スタイルシートで実際に設定しているルートのフォントサイズを基準にCSSの長さをピクセルとremの間で換算し、そのまま貼れる値と式、計算手順を表示します。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 値
- 16
- 変換元
- px
- 変換先
- rem
- 基準サイズ
- 16
- 結果
- 1 rem
- 変換後の値
- 1
- CSS表記
- 1rem
px→rem 変換ツールは、実際に配信するルートフォントサイズを使って、CSS の長さをピクセルから rem へ、または rem からピクセルへ変換します。ツールは変換後の大きさ、1 rem や 16 px のようにそのまま貼り付けられる css 文字列、使用した formula、段階ごとの代入を返すので、デザイントークンとコードレビューの整合が保たれます。テーマ移行、可変タイプの監査、Figma から CSS への引き継ぎ、アクセシビリティのフォント拡大は、いずれもブラウザーのインスペクターを開かずに、rem は px をルートで割った値という同じ決定論的な計算を必要とします。
CSS タイポグラフィにおける px と rem の意味
CSS ではピクセル長（px）が絶対的な長さ単位で、レイアウト・境界線・従来のタイポグラフィトークン全体で使われます。rem 長はルート要素——ほとんど常に html 要素——の font-size に対する相対値なので、1 rem はそのルート font-size のピクセル値そのものに等しくなります。
ルートが 16 ピクセルなら、16 px は 1 rem、32 px は 2 rem、0.5 rem は 8 px です。
デザインシステムがタイプスケールと余白に rem を好むのは、ブラウザーの既定フォントを拡大したり、アクセシビリティのために大きなルートを設定したりするユーザーが、ハードコードされたピクセルを一つ一つ探さずに比例的な拡大を得られるからです。
逆方向の変換は、ライブラリがまだ px トークンを出力するときや、デザインツールが固定ピクセルサイズをエクスポートし、本番のルートに合う rem 宣言が必要なときに重要になります。変換自体は初歩的で、rem は px を base で割った値、px は rem に base を掛けた値であり、base はルート font-size（ピクセル）です。
チームがつまずくのは式ではなく基準の食い違いです——html font-size が 62.5 パーセント（10 px）や 112.5 パーセント（18 px）に設定されているのに 16 と仮定してしまうのです。この計算機は基準を表に出させるため、結果は常にあなたが使うと主張するスケールに一致します。
ゼロやほぼゼロの基準はゼロ除算が有効な CSS 長ではないため拒否され、教室のデモや単体テストにはその失敗経路も含めて、クライアントが rem を黙って無限として扱わないようにすべきです。
実用上のヒント・上限・関連検索
value と base は公表された絶対範囲内に収め、solver が拒否せざるを得ない非有限の結果に製品があふれないようにしてください。クライアントを制御できる場合は事前整形した文字列よりも数値を送るのが望ましく、文字列の数値は厳密な有限数値パターンに一致するときだけ受け付けられます。
すべてのトークン表の隣にルート font-size を記録してください。html がユーザー既定の 62.5 パーセントを使うなら、16 ピクセルのユーザーエージェント既定に対して base は 10 px となり、24 px の見出しは 1.5 rem ではなく 2.4 rem になります。
ルートサイズ（ピクセル）がすでに分かっており長さ変換だけが必要なときはこの機能を選び、実ページの算出スタイルが必要なときはブラウザーのツールをお使いください。往復確認は簡単で、同じ基準で px を rem に変換して戻し、元の値が同じ小数第 12 位の丸めの範囲で回復することを確かめられます。
活用例
Figma のピクセルからデザイントークン表へ
デザインツールから余白とタイプのサイズを px でエクスポートし、base を本番のルートフォントサイズに設定して、実際のスタイルシートに一致する rem トークンを出力します。
px から rem へのテーマ移行
従来のピクセルタイポグラフィと余白スケールを一括で rem に変換し、各バッチで使った正確な基準を記録します。
CSS 長ヘルパーの単体テスト
フロントエンドのユーティリティライブラリやデザインシステムのパッケージ向けに、既知の正しい px↔rem の組と意図的なゼロ基準の拒否を生成します。
よくある質問
px を rem に変換するにはどうしますか？
ピクセル長をルート font-size（ピクセル）で割ります：rem = px / base。16px のルートなら 24px は 1.5rem になります。
rem を px に変換するにはどうしますか？
rem 長にルート font-size（ピクセル）を掛けます：px = rem × base。16px のルートなら 1.25rem は 20px になります。
em や % 単位も変換しますか？
いいえ。 明示されたルート基準（ピクセル）のもとで px と rem の間だけを変換します。em はルートではなく親要素に対する相対値です。
htmlを62.5%にしている場合、基準はいくつですか？
10 pxです。ブラウザ標準の16ピクセルの62.5%は10ピクセルだからです。この基準では24 pxの見出しは2.4 remで、基準16のときの1.5 remではありません。
基準をゼロにできないのはなぜですか？
ルートのフォントサイズがゼロでは比率が決まらないためです。無限の長さを作る代わりに、分かりやすいメッセージで入力を受け付けません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/conv/typography-px-rem \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"from":"px","to":"rem","base":16}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-rem", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"from": "px",
"to": "rem",
"base": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-rem",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"from": "px",
"to": "rem",
"base": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-rem", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"from":"px","to":"rem","base":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"from":"px","to":"rem","base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-rem", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"value": 16,
"from": "px",
"to": "rem",
"base": 16
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_rem",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_abs | 1000000000000 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
数値 value を入力し、from と to を px か rem から選び、base を html（ルート）の font-size（ピクセル）に設定します——デスクトップブラウザーでは 16 が一般的で、デザインシステムによっては 14 や 18 のこともあります。base がゼロのときスケールは未定義になるため、API は無限の長さを勝手に作らず、明確な invalid_input エラーを返します。経路はネットワークも乱数シードも実時刻依存もない純粋な算術なので、無料のブラウザー実行と前払い式 API は、呼び出すたびに固定小数丸めの後で同じ JSON を返します。
API の呼び出し方と返るもの
base は非ゼロでなければならず、絶対値が 1×10 の -15 乗以下はゼロとみなして拒否します。value（別名 amount・n・length）、from（別名 from_unit・unit_from・source）、to（別名 to_unit・unit_to・target）、base（別名 root・root_font_size・root_px・base_px）という必須 4 項目を含む JSON ボディを送信します。value と base は絶対値が公表上限の 1 兆以内に収まる有限数でなければならず、Worker とブラウザーの両方で中間積が IEEE 倍精度でも有限に保たれるようにしています。from と to は別名正規化の後に px か rem へ解決される必要があり、pixel・pixels・rem・rems・root em などの綴りを受け付け、未知の単位名は invalid_input を返します。成功時のレスポンスは丸めた value・from・to・base を返し、result と converted を同じ丸め後の出力量に、unit を変換先単位に、css を 1 rem や 24 px のような簡潔な文字列に、formula を「rem は px をルートで割った値」「px は rem にルートを掛けた値」または from と to が等しいときの恒等メッセージに、message を短い英語の要約に、steps を代入行の順序配列に設定します。検証失敗——項目の欠落、非有限数、絶対上限を超える値、未知の単位、ゼロの基準、非有限の結果——は invalid_input を返し、決して課金されません。料金は成功 1 リクエストあたり定額 $0.002、単位項目でユニット単価はゼロです。
実用上のヒント・上限・関連検索
from と to が等しいとき、ツールは value をそのまま返すので、パイプラインは特別扱いなしに単位を正規化できますが、base は依然として必須で非ゼロとして検証されます。教材とテスト向けの組の例：基準 16 で 16 px を rem にすると 1 rem、基準 16 で 1.5 rem を px にすると 24 px、基準 10 で 20 px を rem にすると 2 rem、そして任意の値で基準ゼロは厳格な invalid_input 経路を示します。このランディングは px→rem 変換、rem→px 計算機、CSS ルートフォントサイズのタイポグラフィツールを探す人を対象としており、親要素に対する相対的な em 変換器でも、可変 clamp の生成器でも、ビューポート単位の計算機でもありません。invalid_input を返す失敗タスクは前払い残高を消費しないため、開発者が意図的に基準をゼロに設定する探索的スクリプトも安価に保てます。
技術的な質問
base がゼロだとどうなりますか。
変換は未定義です。このツールはゼロ除算や無限の長さの捏造をせず、invalid_input を返します。
px→rem 変換ツールは無料ですか。
ブラウザーツールは無料でローカルに動作します。API 呼び出しは成功 1 リクエストあたり $0.002 で前払い式の KIT 残高を使い、失敗タスクは決して課金されません。