Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールは使いやすかったですか？
フィードバックは改善に役立ちます
为前端开发者设计的像素与EM单位互转工具，自定义基准字体，实时双向换算。
概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
この換算ツールは、CSSで使うピクセル値（px）とem値を双方向に計算します。pxはCSSの長さを表す単位、emはフォントサイズを基準にする相対単位です。そのため「1emは何pxか」は常に同じではありません。ツールの初期基準は16pxですが、これは計算開始時の設定値であり、すべての要素で1emが16pxになるという意味ではありません。
計算式は em = px ÷ 基準px、逆方向は px = em × 基準px です。たとえば基準が16pxなら24pxは1.5em、基準が20pxなら同じ24pxは1.2emです。結果を左右するのは、変換したいCSS宣言に合った基準を選べているかどうかです。
一般にemは、その長さを指定する要素の計算済みフォントサイズを参照します。たとえば要素の padding や margin をemで指定するなら、その要素の計算済み font-size を基準にします。一方、font-size: 1.25em のようにフォントサイズ自体を指定するときは、親要素の計算済みフォントサイズを基準にします。親が18pxなら1.25emは22.5pxです。
入れ子の要素では、親の計算結果が子へ引き継がれるためemの指定が段階的に積み重なることがあります。ルート要素を基準にする rem とは参照先が異なります。CSS Values and Units Module Level 4の記述では、emは適用先要素の計算済みフォントサイズを基準とし、font-*プロパティで使う場合は親要素側の計算済みサイズを基準にします。
14px ÷ 16px = 0.875em
24px ÷ 20px = 1.2em
1.25em × 18px = 22.5px
CSSのpxは参照ピクセルの単位であり、画面の物理ピクセル数と必ず一対一に対応するものではありません。この計算はCSS上の数値同士を扱います。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
値を設定するのが font-size か、余白や幅などの別プロパティかを確認します。font-sizeなら親要素、それ以外のem長さなら適用先要素の計算済みフォントサイズが基準の目安です。
ブラウザーの開発者ツールなどで対象箇所の計算済みフォントサイズを調べ、「基準ピクセル」に入力します。初期値は16pxです。継承や親要素の指定がある場合は、CSSに書いた値だけで判断せず最終的な計算値を確認してください。
pxからemにする場合はピクセル欄へ、emからpxへ戻す場合はEM欄へ入力します。反対側の値が連動して更新されます。表示値のコピー操作も利用できます。
換算値をCSSへ反映したら、対象要素の計算済みスタイルを確認します。画面には8、12、14、16、18、20、24、32、48、64pxの参照値もあり、選ぶとそのpx値を換算欄へ反映できます。
基準を変更した場合は現在のpx値を使ってemが再計算されます。リセットするとpx入力は16、基準は16pxに戻ります。
活用例
仕事や日常の流れの中での活用方法を紹介します。
デザイン資料の余白が24pxで、対象コンポーネントのフォントサイズが20pxの場合、基準を20pxにして換算すると1.2emです。実際の要素の文字サイズと余白が一緒に変化する設計かを確認したうえで、値を採用できます。
CSSに1.25emとあり、対象プロパティの基準フォントサイズが18pxなら、逆方向の換算で22.5px相当と確かめられます。入れ子のフォント指定がある場合は、各階層の計算済みサイズを順に調べると基準を取り違えにくくなります。
文字サイズに連動させたい内側の余白や間隔を検討するとき、pxの設計値をemへ換算して比率を確認できます。値を反映した後は、文字サイズを変えた状態でもレイアウトを点検してください。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
いいえ。16pxはこのツールの初期基準です。CSSでのemは使用箇所に応じた計算済みフォントサイズを参照するため、基準が20pxなら1emは20pxとして換算します。
親要素の計算済みフォントサイズです。たとえば親が18pxで子に1.25emを指定するなら、子のフォントサイズは22.5px相当です。paddingなど別のプロパティでは、その要素自身の計算済みフォントサイズが基準になります。
基準にしたフォントサイズが実際の計算値と違う可能性があります。対象プロパティがfont-sizeかどうか、親子関係、継承や上書きを確認し、該当箇所の計算済みサイズを基準pxに設定してください。
emは要素ごとのフォントサイズを基準にし、remはルート要素のフォントサイズを基準にします。局所的な文字サイズとの連動を計算したいか、ページ全体で共通のルート基準にしたいかに合わせて選びます。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
関連
関連ツール、特集、利用可能なAPIを探せます。