emをピクセルへ変換
親のフォントサイズが16 pxなら1.5emは24 px、20 pxなら同じ値が30 pxになります。em値と親のフォントサイズを入力するだけで、余白や見出しの実際のピクセル長が分かります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- em値
- 1.5
- 親要素のフォントサイズ (px)
- 16
- ピクセル
- 24
- CSS値
- 24px
- 精度
- 6
emからピクセルへの変換ツールは、特定の親フォントサイズにおいて、相対的なCSSのem値が表す実際のピクセル長を示します。emの測定値と、親要素の計算済みフォントサイズをピクセルで入力すると、両者を乗算し、安定したピクセル値と読みやすいCSS値を返します。継承された文字設定によって大きさが変わるタイポグラフィ、余白、コンポーネント寸法、レスポンシブな画面の確認に役立ちます。
emという寸法が表す内容を理解する
emは、表示される大きさが文字のコンテキストに依存する相対的なCSS長です。多くのプロパティでは、1emはそのプロパティを使用する要素の計算済みフォントサイズに相当します。継承値や親の設定を基準に考える場合、入力した親フォントサイズがプレビューの実用的な基準になります。
そのため、em値には常に同じピクセル数が対応するわけではありません。基準が16ピクセルなら、1emは16ピクセル、1.5emは24ピクセルです。基準が20ピクセルなら、同じ相対値は20ピクセルと30ピクセルになります。
この変換ツールは、ブラウザの既定値を暗黙に仮定せず、この依存関係を明示します。確認しやすいように計算式も示します。本ツールはWebページの調査、カスケードの解決、スタイルシートの読み込み、どの祖先がプロパティを制御するかの推測を行いません。
ピクセルを計算して丸め方を指定する
2つの必須値は有限数でなければならず、フォントの基準値は0より大きい必要があります。0以下の計算済みフォントサイズは、このプレビューの意味のある基準にならないためです。em値については0と負数を受け付けます。
0は生成されたトークン表で便利であり、負の相対オフセットやマージンは多くのCSSレイアウトで有効です。既定では、ピクセル結果を小数点以下6桁に丸めます。テストデータ、仕様書、表示表で別の精度が必要な場合は、precisionに0から12までの整数をご指定ください。
CSSとデザインで実寸をプレビューする
フロントエンド開発者は、ローカルなタイポグラフィに合わせて拡大縮小するコンポーネントを確認する際に、この変換を利用できます。横パディングが1.25emのボタンは、16ピクセルのフォントでは均整が取れていても、18ピクセルを継承するカード内では実際の幅が変わります。両方を変換すれば、ブラウザの開発者ツールを開く前に影響を確認できます。
デザイナーは元のトークン体系を変えずに、相対トークンを引き渡し用のピクセル注釈へ変換できます。アクセシビリティ担当者は、継承文字サイズを大きくした場合の実寸への影響を比較できます。出力はテストデータにも使えます。
対象範囲にはご注意ください。本ツールはemからpxへの変換だけを行い、逆変換、ルート基準のrem解決、パーセント評価、ブラウザのズームやデバイスピクセル比の再現はしません。結果は物理画素ではなくCSSピクセルです。
どちらも同じ純粋なアルゴリズムを使うため、確認済みの例を算術処理を変えずにビルド処理へ移せます。
活用例
コンポーネント余白の確認
実際の親フォントサイズでemトークンが生むパディングやマージンをピクセルで確認できます。
デザイン引き渡しの準備
デザインシステムの相対em値を維持しながら、具体的なピクセル注釈を追加できます。
安定したテストデータの作成
テーマ、コンポーネントテスト、CSS文書向けに決定的な想定ピクセル寸法を生成できます。
よくある質問
1emは常に16ピクセルですか?
いいえ。 該当するフォント基準が16ピクセルの場合だけです。実際の親フォントサイズをご指定ください。
負のem値も変換できますか?
はい。 負の相対オフセットやマージンは有効なCSSになり得るため、負のem値も受け付けます。
結果は端末の物理ピクセルを表しますか?
いいえ。 CSSピクセルを表します。ブラウザ倍率とデバイスピクセル比が物理画素との対応を決めます。
親のフォントサイズには何を入力しますか?
親要素の計算済みフォントサイズをピクセルで入力します。たとえばカードが18 pxを継承しているなら18です。ページを読み込んで、どの要素が決めているかを推測することはしません。
remやパーセント、ピクセルからemへの変換もできますか?
いいえ、emからピクセルへの換算だけを行います。ルート要素を基準にするremやパーセント、画面幅の単位は扱わず、ブラウザのズームや画面の密度も再現しません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/str/em-to-px \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"em_value":1.5,"parent_font_size_px":16}'const res = await fetch("https://api.kit.forhosting.com/str/em-to-px", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"em_value": 1.5,
"parent_font_size_px": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/em-to-px",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"em_value": 1.5,
"parent_font_size_px": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/em-to-px", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"em_value":1.5,"parent_font_size_px":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"em_value":1.5,"parent_font_size_px":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/em-to-px", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"em_value": 1.5,
"parent_font_size_px": 16
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.em_to_px",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
計算はネットワーク、保存、乱数、日付を使わず決定的に実行され、自動APIリクエスト1件の料金は$0.002です。
emという寸法が表す内容を理解する
レスポンスは入力値を再掲し、pixelsに計算結果を返し、24pxのようなcss_valueも含めます。計算済みの親サイズをご指定いただくため、結果は決定的であり、デザイン確認、文書、テスト、API処理に適しています。
ピクセルを計算して丸め方を指定する
計算はpixelsがem_valueとparent_font_size_pxの積に等しいというものです。丸めはpixelsとcss_valueに適用されますが、追跡できるよう入力値はそのまま示します。また、JSON比較で意外な値にならないよう、負の0を通常の0へ正規化します。NaN、Infinity、欠落フィールド、未対応型、過大な値、上限を超える結果は、誤解を招く数値を返さずinvalid_inputとして拒否します。数値フィールドに単位文字列を含めず、1.25emではなく1.25、18pxではなく18を送信してください。この厳密な仕様により、表計算、SDK、Webフォーム、継続的インテグレーションのテストデータが一貫します。
CSSとデザインで実寸をプレビューする
テーマ生成ツールがAPIを呼び、値を保存し、想定寸法を検証できます。対話的な計算はブラウザで動作し、自動リクエストの料金は$0.002です。
技術的な質問
emをピクセルへ変換する式は何ですか?
em値と親フォントサイズのCSSピクセル値を掛けます:pixels = em_value × parent_font_size_px。
APIリクエストの料金はいくらですか?
自動APIリクエスト1件の料金は$0.002です。このページのブラウザ内計算は無料でご利用いただけます。