EM→PX変換ツールとは？
このツールは、CSSのem単位を絶対値であるピクセル（px）に換算します。emは相対単位で、1emは親要素のフォントサイズ（フォント以外のプロパティでは要素自身のフォントサイズ）と等しくなります。ブラウザのルートフォントサイズは初期値で16pxのため、1emは通常16pxになりますが、実際の値は設定する基準フォントサイズによって変わります。
使い方
変換したいem値を入力し、続けて基準フォントサイズをピクセルで入力します。多くのブラウザの初期値は16pxなので、この値があらかじめ入力されています。「計算」ボタンを押すと、相当するピクセル値が表示されます。ピクセル指定のデザイン仕様と、em指定のスタイルシートを突き合わせたいときに便利です。
計算式の解説
変換はシンプルな掛け算です。
$$\text{px} = \text{em} \times \text{基準フォントサイズ}$$たとえば基準16pxで1.5emなら、\(1.5 \times 16 = 24\,\text{px}\)となります。逆に求めたい場合は、ピクセルを基準値で割ります：\(\text{px} \div \text{基準} = \text{em}\)。
計算例
たとえば見出しを2.5emに設定し、基準フォントサイズが16pxだとします。ピクセル換算は\(2.5 \times 16 = 40\,\text{px}\)です。もし基準が18pxであれば、同じ2.5emでも\(2.5 \times 18 = 45\,\text{px}\)で表示されます。emが基準値に応じて拡大・縮小する様子がよく分かります。
よくある質問
1emは常に16pxですか？ 基準フォントサイズがブラウザ初期値の16pxである場合のみです。親要素やルートのフォントサイズが異なれば、1emの値もそれに応じて変わります。
emとremの違いは？ remは常にルート（html要素）のフォントサイズを基準にします。一方emは最も近いフォントサイズ指定を基準にするため、入れ子になると継承して累積していきます。
なぜpxではなくemを使うのですか？ em単位はユーザーのフォントサイズ設定に追従するため、アクセシビリティが向上し、レスポンシブなタイポグラフィを保守しやすくなります。
