【CSS】PX ⇒ EM 単位測定値の確認が簡単！

PX から EM への変換が簡単に確認できるサイトを紹介します。

EMとは何ですか？
ウィキペディアは、「emはタイポグラフィの分野における測定単位であり、現在のフォントのサイズに等しい」と説明しています。
font-sizeが16ピクセルの場合、1em=16px
※詳細については、ウィキペディアとMozillaMDNを参照してください。

PX、EM、％、PTのテキストサイズの違いは何ですか?

ピクセルとポイントは静的な測定値ですが、一般的にさまざまな媒体で使用されます。画面はピクセル単位で測定されるため、画面ではピクセルが使用されます。

ポイントは画面上で使用できますが、DPIの要素であるため、印刷の標準です。

一方、パーセントとEMは相対的な測定値です。EMまたはパーセンテージ単位のサイズは、その親によって異なります。本文テキストのサイズが12ピクセルの場合、本文内で120%または1.2EMに設定されたテキストは1.2*12または14.4ピクセルになります。

PX、EM、％、PTの間で変換は、「pxtoem.com」のご利用が楽です！

PX ⇒ EM

式:サイズ(ピクセル)/親のサイズ(ピクセル)
例:12px/16px=.75em

PX ⇒ ％

式:ピクセル単位のサイズ/ピクセル単位の親サイズ*100
例:12px/16px*100=75%

PX ⇒ PT

数式:ピクセル単位のサイズ*(1インチあたりのポイント数/1インチあたりのピクセル数)
例:16px*(72pt/96px)=12pt

EM ⇒ PX

式:EM単位のサイズ*親のサイズ(ピクセル単位)
例:.75em*16px=12px

EM ⇒ ％

計算式:EM単位のサイズ*100
例:.75em*100=75%


CSSでEMを使用してテキストのサイズを変更する理由
EMに設定されたすべてのテキストは本文のフォントサイズに合わせて調整されるため、スタイルシートの保守が容易になります。各要素のfont-sizeを個別に変更するのではなく、1つの要素のfont-sizeだけを変更する必要があります。

テキストはピクセル単位で静的に設定されるのではなく、好みに基づいてスケーリングされるため、エンドユーザーのアクセシビリティが向上します。さらに、エンドユーザーはホットキーを使用して、すべてのブラウザーでテキストを拡大縮小できます。多くの人は、コンピューター画面上の小さなテキストを読むのが困難です。

詳細については、AListApart、informIT、JonTanのブログ、およびこのSharePointブログを参照してください。

※PXtoEM.comとは?
PXtoEM.comは、pxからemへの変換を簡単にします。本文のフォントサイズをピクセル(px)で選択すると、完全なピクセル(px)からemへの変換テーブルが表示され、CSSを使用した柔軟なWebデザインが簡単になります。かつてはピクセル(px)をとらえどころのないemに変換するという困難な課題は、鼻くそを食べる鼻くそに縮小されました。
PXtoEM.comはさらに一歩進んで、CSSを提供しています。