PX・EM変換ツール

ピクセルと em は一般的な CSS の長さ単位ですが、サイズの決め方が異なります。CSS ピクセルは、ブラウザーが機器間で一貫した見た目の寸法を作るために使う基準単位です。em は要素の文脈におけるフォントサイズに対する相対単位です。font-size などのプロパティでは、一 em は通常、親要素の計算済みフォントサイズを基準とします。他の多くのプロパティでは、要素自身の計算済みフォントサイズが基準です。 正しい基準が分かれば計算は簡単です。ピクセル値を基準フォントサイズで割ると em になります。基準が 16 ピクセルなら、24 ピクセルは 1.5 em、8 ピクセルは 0.5 em です。逆方向は em に基準値を掛けます。基準が 20 ピクセルなら、1.25 em は 25 ピクセルです。この計算機は両方向に対応し、すべてのデザインが一般的なブラウザー既定値の 16 ピクセルを使うとは仮定しません。 相対単位は、ユーザー、テーマ、コンポーネントが文字サイズを変えたときに、文字組みと余白をまとまりよく変化させるのに役立ちます。例えば em で指定したパディングはボタンのラベルと一緒に大きくなり、大きな文字でも比率を保てます。細い枠線や厳密に管理する図形など、同じように拡大縮小すべきでない細部にはピクセルも有用です。常に優れた単位があるわけではなく、設計意図と継承の文脈で選びます。 em と rem を混同しないでください。rem はルート要素のフォントサイズを基準としますが、em はローカルなフォントサイズに従うため、入れ子で倍率が重なることがあります。親が 1.25 em、子も 1.25 em なら、子の計算済みサイズは元の基準の 1.5625 倍になる場合があります。独立したコンポーネントには便利ですが、ルート基準を想定する開発者には意外な動作となり得ます。 正確に換算するには、実際の計算済み基準フォントサイズを使ってください。ブラウザーの既定値、ユーザーのアクセシビリティ設定、メディアクエリ、継承スタイル、コンポーネント規則によって変わります。開発者ツールで特定要素の計算値を確認できます。結果は選んだ基準での数学的な等価値であり、二つの宣言があらゆるレスポンシブ環境や入れ子で同じ動作をする保証ではありません。さまざまな表示領域、ズーム率、ユーザーの文字設定で変換後のスタイルを試し、読みやすさとレイアウトが保たれるか確認してください。