MCPで接続 →

計算を入力してください

公式

広告

結果

対応するEM値
1
em
ピクセル値 16 px
基準フォントサイズ 16 px
計算結果 1 em

PXからEMへの変換ツールとは?

このツールは、ピクセル(px)の値をCSSで使われるem単位へと変換します。ピクセル(px)は絶対的な単位ですが、emは基準となるフォントサイズに対する相対的な単位です。emを使ってデザインすると、要素がユーザーのフォント設定に合わせて拡大・縮小されるため、レイアウトの柔軟性とアクセシビリティが高まります。

使い方

変換したいピクセル値と、基準となるフォントサイズ(ピクセル単位)を入力します。ほとんどのブラウザではルートフォントサイズの初期値が16pxに設定されているため、基準値としては16がよく使われます。計算ボタンをクリックすると、対応するem値が表示されます。

計算式の解説

変換は単純な割り算で行います。

$$\text{EM} = \frac{\text{Pixel value (px)}}{\text{Base font size (px)}}$$

基準フォントサイズが16pxの場合、16pxは1em、24pxは1.5em、8pxは0.5emになります。ここで重要なのは、正しい基準値を選ぶことです。emは親要素のフォントサイズを基準とするため、ルート要素の値とは異なる場合があります。

ピクセル値を基準フォントサイズで割るとem値になることを示す図
em値は、ピクセル値を基準フォントサイズ(ピクセル)で割った値です。

計算例

たとえば、基準フォントサイズを16pxとして24pxを変換してみましょう。計算式に当てはめると、$$24 \div 16 = 1.5\,\text{em}$$となります。つまり、24pxの見出しは1.5emに相当します。

基準16ピクセルで24ピクセルを1.5 emに変換する例
例:基準16pxの場合、24pxは1.5emになります。

よくある質問

基準フォントサイズには何を指定すればよいですか? 変換したい要素の親要素のフォントサイズを使いましょう。ルートレベルで変換する場合は、ブラウザの標準値である16pxが一般的です。

emとremの違いは何ですか? emは親要素のフォントサイズを基準とするのに対し、remは常にルート要素のフォントサイズを基準とします。

なぜpxではなくemを使うのですか? emはユーザーのフォント設定に合わせて拡大・縮小されるため、アクセシビリティやレスポンシブデザインの向上につながります。

最終更新: