PX→EM 変換
親要素のフォントサイズが16 pxなら、24 pxは1.5 emです。CSSの長さをピクセルとemの間で双方向に換算し、入れ子の部品やアクセシビリティを考えた余白にそのまま貼れる値を表示します。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 値
- 24
- 基準（親要素）
- 16
- 「value」の変換元単位
- px
- 変換先
- em
- 結果
- 1.5
- 変換元ラベル
- pixels
- 変換先ラベル
- em
- CSS表記の結果
- 1.5em
この px→em 変換ツールは、親要素のフォントサイズ（ピクセル）を基準として、CSS の長さをピクセルから em へ、または em からピクセルへ変換します。相対タイポグラフィはこの基準に依存します。1 em は親の算出フォントサイズに等しいので、基準 16 ピクセルでの 16 ピクセルは 1 em、同じ基準での 1.5 em は 24 ピクセルです。ここで用いる恒等式は完全に決定論的で、em は px を基準で割った値、px は em に基準を掛けた値です。すでにご存じかもしれない小さな確認として、基準 16 で 24 ピクセルを em にすると 1.5、基準 16 で 0.875 em をピクセルにすると 14 になります。エンジンは有限算術のみを用い、ネットワーク通信もサンプリングも日付依存の近道もありません。
pxとemの意味と結果の見方
ピクセルと em の間の CSS 長変換は、狭い範囲のレイアウト上の問いに答えます。すなわち、片方の単位での大きさと親要素のフォントサイズ（ピクセル）が与えられたとき、カスケードが変化しても余白・タイプスケール・コンポーネント寸法が比例を保つよう、もう片方の単位で等価な大きさはいくつかという問いです。
ピクセルは CSS における絶対的・デバイス非依存の長さで、em は親要素の算出フォントサイズに対する相対値なので、親のフォントサイズが変われば同じ em 値も比例して伸縮します。
正規 ID はピクセルが px、相対単位の em が em で、pixel・pixels・ems などの日常的な綴りはこれらの ID に正規化されるため、フォーム・クエリ文字列・表計算は独自の列挙型を作らずに同じ契約を再利用できます。ビューポート計算も rem のルート参照もメディアクエリの模擬もありません。
rem・パーセント・ビューポート単位や汎用の多分類変換が必要なときはそれぞれの専用ツールをお使いください。
px–em 変換がデザインシステム・CSS・ソフトウェアで果たす役割
デザインシステムはデザインツール向けに余白とタイプのトークンをピクセルで保存することが多い一方、本番の CSS は局所フォントサイズに応じて伸縮すべき入れ子コンポーネントには em を好むため、決定論的な変換器が 1 つあれば、設計者・フロントエンド技術者・学生がスタイルシートを書き換えるときの手計算のずれを防げます。
アクセシビリティ監査は固定ピクセルのパディングを em に変換し、テキストズームやユーザーのフォント設定でヒット領域が比例して拡大するようにします。メールテンプレートや旧来のスキンは今も絶対長と相対長を混在させており、リリース前にはオフラインでの手早い確認が必要です。
教師は 16 ピクセルの本文と 24 ピクセルの見出しを、rem に黙って切り替えたり基準を落としたりする不透明なアプリに頼らず素早く確認する宿題を出します。
開発者は同じ契約をスクリプトから呼び出し、テーマ生成器の決定論的なテストベクトルを用意し、寸法デモの前にユーザー入力サイズを正規化し、手加減した推定ではなく厳密な比を求めるプログラミング課題を満たします。
製品ツールは、学習者やエージェントが 24 ピクセルと基準 16 を打ち込み、UI がピクセルの反響と並べて 1.5 em を示さねばならないときにこの書き換えを使います。
同じフォームが長さやデータサイズも扱う必要があるときは汎用の単位変換器と組み合わせ、基準が親フォントサイズではなくカスケードのルートやビューポートである場合には rem やビューポートのツールを分けてお使いください。
活用例
デザイントークンとタイプスケール
ピクセル単位のタイプと余白のトークンを em に変換し、親フォントサイズに応じて伸縮すべき入れ子コンポーネントに合わせます。
スタイルシートの書き換えとアクセシビリティ
固定ピクセルのパディングと行間を em に書き換え、テキストズームでレイアウトが比例して拡大するようにします。
決定論的な CI フィクスチャ
テーマ生成器・単体テスト・デザインシステムのパイプライン向けに、再現可能な px↔em の組を生成します。
よくある質問
px と em はどう関係していますか？
親フォントサイズの基準（ピクセル）を base とすると、em = px / base、px = em * base です。1 em は親のフォントサイズに等しくなります。
基準フォントサイズがゼロだとどうなりますか？
基準がゼロだと em = px/base が未定義（ゼロ除算）になります。
このツールは rem・パーセント・ビューポート単位を変換しますか？
いいえ。 明示された親フォントサイズ（ピクセル）のもとで px と em の間だけを変換します。rem や他の CSS 単位には専用ツールをお使いください。
なぜ結果は指定精度に丸められるのですか？
既定の精度は小数 10 桁で、0 から 15 まで指定できます。
基準16 pxで0.875 emは何ピクセルですか？
14 pxです。emの値に親要素のフォントサイズを掛けるので、0.875×16で14になります。親のサイズが変われば、同じemでもピクセル数は変わります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/conv/typography-px-em \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"base":16,"from":"px","to":"em"}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-em", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"base": 16,
"from": "px",
"to": "em"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-em",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"base": 16,
"from": "px",
"to": "em"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-em", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"base":16,"from":"px","to":"em"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"base":16,"from":"px","to":"em"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-em", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"value": 16,
"base": 16,
"from": "px",
"to": "em"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_em",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_abs_value | 1000000000000000 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
デザイントークン、スタイルシートの書き換え、アクセシビリティ監査にはブラウザーで無料でお使いいただき、CI・デザインシステム・教材で再現可能な CSS 長のフィクスチャが必要なときは、成功 1 リクエストあたり $0.002 で API を呼び出してください。
px と em の意味とレスポンスの内容
この計算機は数値 value、基準フォントサイズ（ピクセル）base、変換元単位、変換先単位を受け取り、安定した精度に丸めた result、正規化された from と to の識別子、人が読めるラベル、ピクセル単位の中間値、1.5em のような簡潔な result_css 文字列、短い formula の注記を返します。エンジンは対応範囲内で与えられた基準による乗除を行うか、あるいは入力を invalid_input で拒否するかのどちらかです。拒否される場合には value・base・from・to のいずれかの欠落、非有限数、公表上限を超える大きさ、未知の単位文字列、そして em は px を基準で割った値でありゼロ除算になるためゼロまたは数値的にゼロの基準が含まれます。このページは既知の親フォントサイズのもとでの px 対 em のみに答え、ワークシート・単体テスト・係数を勝手に作ってはならない API 利用者に適した安定した数値出力を返します。
value・base・単位の読み取り方と結果の再現性
数値文字列の科学記数法は有限の小数として解析できる場合に許容され、埋め込まれた空白・16 進接頭辞・非数値トークンは明確なメッセージとともに拒否されるので、不正なセルが誤った文字サイズになることはありません。相対的な em 変換はゼロでない親フォントサイズなしには定義されないためです。計算はピクセルを経由します。推奨される項目は、CSS 長の大きさを表す value、親のフォントサイズ（ピクセル）を表す base、変換元単位の from、変換先単位の to です。value には amount・length・n・quantity・size、base には base_px・parent・parent_font_size・font_size・root、from には unit・from_unit・source・input_unit、to には target・to_unit・output_unit・into という別名があり、多様なクライアントが 1 つの契約を共有できます。ゼロは有効な value で変換先単位でも単にゼロになりますが、ゼロの基準は常に invalid_input で失敗します。from が em なら value に base を掛けてピクセルを得て、to が em ならそのピクセル量を base で割ります。同一単位のリクエストは base を検証した上で value をそのまま返すので、常に親サイズを送るフォームでも契約が一様に保たれます。このページでの無料ブラウザー実行と有料 API を組み合わせれば、タイポグラフィの計算を自分で再実装せずに、自動化パイプラインの中で同一の数学的結果が得られます。
px–em 変換がデザインシステム・CSS・ソフトウェアで果たす役割
このページでは処理はすべてブラウザー内で動作し、API では成功する検索 1 件につき $0.002 がかかり、検証失敗は課金されず、レスポンスが返った後は何も保存されません。無料の対話的探索と、有料で同一の API というこの分担は、KIT の tier A カタログの他の部分と揃っており、数学的結果を変えずに教室のデモから自動化パイプラインへ移行できます。
技術的な質問
px→em 変換ツールの料金はいくらですか。
このページのブラウザー版は無料です。API 経由では成功 1 リクエストにつき $0.002 で、無効な入力は課金されません。