ピクセルを em 単位へ
ピクセルの大きさを、親要素を基準にしたemに変換します。親が16 pxなら24 pxは1.5 emで、1.5emとしてそのまま貼り付けられます。文字や余白が親のフォントサイズや閲覧者の設定に合わせて変わります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- Px
- 24
- 親要素
- 16
- Em
- 1.5
- CSSのem値
- 1.5em
- 比
- 1.5
- 精度
- 10
このピクセルから em への変換ツールは、ピクセルで与えられた CSS フォントサイズを、親要素のフォントサイズを基準として em 単位に変換します。相対的なタイポグラフィはその基準に依存します。1 em は親の計算済みフォントサイズに等しいため、親が 16 ピクセルのとき 24 ピクセルは 1.5 em、同じ親で 14 ピクセルは 0.875 em になります。ここで用いる恒等式は完全に決定的です。em は px を親で割った値です。デザイナー、フロントエンド技術者、アクセシビリティ監査担当者は、ユーザーのフォント設定や入れ子コンポーネントの文脈に応じて伸びるスケーラブルなスタイルシートへ、固定ピクセルのタイプスケールを書き換える際にこの変換を利用します。エンジンは有限算術のみを用い、ネットワーク呼び出し、サンプリング、日付依存の近道は一切ありません。
ピクセルと em の意味、および応答に含まれる内容
CSS でピクセルから em への変換は、レイアウト上の明確な問いに答えます。ピクセルで表したフォントサイズまたは間隔の長さと、親要素のフォントサイズ（ピクセル）が与えられたとき、カスケードやユーザーズームが変わっても文字・パディング・コンポーネントサイズが比例を保てるよう、em での等価な大きさを求めます。
ピクセルは CSS におけるデバイス非依存の絶対長であり、em は親要素の計算済みフォントサイズに相対するため、親のフォントサイズが変わると同じ em 値も自動的に拡大縮小します。
拒否されるケースには、px または parent の欠落、非有限数、文書化された上限を超える大きさ、ゼロまたは数値的にゼロの parent（em は px を parent で割るためゼロ除算になる）が含まれます。ゼロは有効な px 値であり、単に 0 em を返します。サイズトークンを空にする場合や空の間隔を検証する場合に便利です。
双方向変換、rem、パーセント、ビューポート単位が必要な場合は、それぞれの専用ツールをご利用ください。
デザインシステム・CSS・ソフトウェアにおける px から em への位置づけ
デザインシステムはデザインツール向けに間隔や書体のトークンをピクセルで保持することが多い一方、本番 CSS では局所フォントサイズに合わせて伸びる入れ子コンポーネント向けに em を好みます。決定的な単一の変換器があれば、デザイナー、フロントエンド技術者、学生がスタイルシートを書き換えるとき、手計算のずれを防げます。
アクセシビリティ監査では、固定ピクセルのパディングや行に関するサイズを em に直し、テキストズームやユーザーのフォント設定がヒット領域を比例拡大できるようにします。メールテンプレートやレガシースキンは依然として絶対長と相対長を混在させ、リリース前に素早いオフライン確認が必要です。
教員は、16 ピクセルの本文と 24 ピクセルの見出しを手早く検算させる課題を出し、静かに rem に切り替えたり親基準を落としたりする不透明なアプリに頼らないようにします。
開発者は同じ契約をスクリプトから呼び、テーマ生成器の決定的なテストベクトルを埋めたり、デモの寸法決め前にユーザー入力サイズを正規化したり、概算ではなく厳密な比を求めるプログラミング課題の条件を満たしたりします。
学習者やエージェントが 24 ピクセルと 16 ピクセルの親を入力し、UI が 1.5 em をピクセルのエコーと並べて示す必要がある製品ツールでも、この書き換えが使われます。このページでは処理はすべてブラウザ内で完結します。
参照が親フォントサイズではなくカスケードのルートやビューポートである場合は rem やビューポート用ツールを分け、問いがスケーラブルでアクセシブルなタイポグラフィのためのピクセルから em 単位への変換に厳密に限るときは、この変換器に焦点を保ってください。
活用例
デザイントークンとタイプスケール
入れ子コンポーネントが親のフォントサイズに合わせて伸びるよう、ピクセルの書体・間隔トークンを em に変換します。
スタイルシートの書き換えとアクセシビリティ
テキストズームとユーザーフォント設定がレイアウトを比例拡大するよう、固定ピクセルのフォントサイズを em に書き直します。
決定的な CI フィクスチャ
テーマ生成器、単体テスト、デザインシステムパイプライン向けに再現可能な px→em の組を生成します。
よくある質問
ピクセルと em はどのように関係しますか？
親フォントサイズがピクセルのとき、em = px / parent です。1 em は親のフォントサイズに等しく、parent が 16 のとき 24px は 1.5em になります。
親のフォントサイズがゼロの場合はどうなりますか？
parent がゼロだと em = px/parent は未定義（ゼロ除算）になります。
このツールは em をピクセルに戻したり、rem に変換したりしますか？
いいえ。 この機能は明示的な親フォントサイズ（ピクセル）のもとでピクセルから em のみを変換します。逆変換や rem には専用ツールをご利用ください。
なぜ結果は精度で丸められるのですか？
既定の精度は小数 10 桁で、precision は 0 から 15 まで設定できます。
ピクセルをemに変換するのはなぜですか？
emは親要素のフォントサイズに合わせて変わるためです。閲覧者が文字を大きくしたり拡大表示したりすると、emで指定した大きさも同じ割合で大きくなり、読みやすさと部品の釣り合いが保たれます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/str/px-to-em \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"px":24,"parent":16}'const res = await fetch("https://api.kit.forhosting.com/str/px-to-em", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"px": 24,
"parent": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/px-to-em",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"px": 24,
"parent": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/px-to-em", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"px":24,"parent":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"px":24,"parent":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/px-to-em", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"px": 24,
"parent": 16
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.px_to_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 タイポグラフィ用フィクスチャが必要な場合は、成功リクエストごとに $0.002 の API をご利用ください。
ピクセルと em の意味、および応答に含まれる内容
この計算機は数値の px と親フォントサイズ（ピクセル）を受け取り、安定した精度に丸めた em 結果、スタイルシートに貼り付けられる 1.5em のような短い em_css 文字列、エコーされた入力、表で見やすいように em 結果と等しい ratio フィールド、短い数式のメモを返します。このページには em から px への逆変換、rem ルートの参照、ビューポート計算、メディアクエリのシミュレーションはありません。エンジンは対応する大きさの範囲内で px を parent で割るか、invalid_input で入力を拒否します。このページは既知の親フォントサイズのもとでピクセルから em のみを扱い、ワークシート、単体テスト、手計算で係数を捏造してはならない API 利用者向けに、安定した数値出力を提供します。
px・parent・precision の読み取りと結果の再現性
数値文字列の科学記法は有限小数として解釈できる場合に限り許可されます。埋め込み空白、16 進プレフィックス、非数値トークンは明確なメッセージで拒否され、スプレッドシートの誤ったセルが誤った書体サイズに化けるのを防ぎます。非ゼロの親フォントサイズがなければ相対 em 変換は未定義だからです。計算は一回の除算です。 em は px を parent で割った値です。親が 16 のとき 24 ピクセルが 1.5 em になる既知の組を、手で比を再導出せずにアサートするフィクスチャに適しています。入れ子の見出しと本文についてピクセルのタイプスケールを em に直す宿題の採点にも、同じ契約を使えます。推奨フィールドは、ピクセル量の px と、親フォントサイズ（ピクセル）の parent です。ピクセル側には pixels・size・font_size・value・amount の別名があり、parent 側には base・parent_px・parent_font_size・base_font_size・root があり、異種クライアントが同じ契約を共有できます。parent がゼロの場合は常に invalid_input で失敗します。タイポグラフィ計算を自分で再実装せず、自動化パイプライン内で同一の数学結果が必要なときは、このページの無料ブラウザ実行と有料 API を組み合わせてください。
デザインシステム・CSS・ソフトウェアにおける px から em への位置づけ
API では成功した照会ごとに $0.002 がかかり、検証失敗は課金されず、応答後に何も保存されません。無料の対話的探索と同一の有料 API という分離は、KIT のティア A カタログの他項目と一致し、教室デモから自動化パイプラインへ数学結果を変えずに進めます。
技術的な質問
ピクセルから em への変換の料金はいくらですか？
このページではブラウザで無料です。API では成功リクエストごとに $0.002 がかかり、無効な入力は課金されません。