em を px に換算 Em ↔ Pixels 無料 オンライン 安全

em を px に換算する理由

スタイルシートには、見出しに margin-bottom: 0.75em、ボタンに padding: 0.4em 0.9em、テキストのブロックに line-height: 1.3em とあります。どれも柔軟でよい値ですが、思い浮かべるのはほとんど不可能です。そのマージンは何ピクセルでしょうか。ボタンのパディングは、デザインファイルの 6 px と 14 px に合っているでしょうか。それを知るために em を px に換算します。em が参照するフォントサイズを掛け、デザインツールが使う単位で答えを読みます。これは、開発者がコードをレビューするとき、ビルドをモックアップと照合するとき、間隔の問題をデバッグするとき、完成したコンポーネントをピクセルで考える人に引き渡すときに問う質問です。

em は、CSS で換算するのが最も厄介な単位です。固定された値がないからです。em は、その値が使われる場所で有効なフォントサイズであり、font-size プロパティ自体では親のものです。したがって 1.5 em は、同じスタイルシートの同じ規則から、ある場所では 24 px、別の場所では 36 px になりえます。そのためこの換算ツールは推測しません。em が参照するフォントサイズを尋ね、答えの隣にそれを示し、それを使って計算します。サイズがわからなければ、以下の節に、ブラウザでの調べ方が説明されています。

計算はブラウザ内で行われ、何もアップロードされません。以下には、式、正しい基準の見つけ方、換算が保つものと保てないもの、入れ子の em の値がどう掛け合わさるか、開発者がいつ em を px に換算する必要があるか、そして em ベースのスタイルシートを理解しやすく保ついくつかの習慣があります。

式と基準

px は em にフォントサイズを掛けたもの

式は一回の掛け算です。px = em × 基準。基準が 16 px なら、1.5 em は 24 px、0.75 em は 12 px、2 em は 32 px になります。ページは結果の隣に基準を表示するので、1.5 em = 24 px (16 px) のような行は、何を前提にしたかを正確に示します。要素のフォントサイズが 20 px なら、20 と入力すると、1.5 em は 30 px になります。

ブラウザで基準を見つける

開発者ツールを開き、要素を選んで、計算済みのフォントサイズを見てください。それが、font-size 以外のあらゆるプロパティで基準欄に入力する数字です。font-size 自体については、代わりに親を選んで、その計算済みのサイズを読みます。数秒で済み、当て推量を完全になくします。

ページが見えないとき

ページなしでコードを読んでいるなら、要素から上へフォントサイズの連鎖をたどってください。自身の font-size があればそれ、なければ親のもの、そしてルートまで続き、ルートはスタイルシートか読者が変えない限り 16 px です。サイズが em で与えられているところでは、連鎖に沿って掛け合わせます。これは面倒で、だからほとんどのチームはフォントサイズに rem を選ぶのです。

換算が保つものと保てないもの

テキストとの比率を保つ

結果は、入力した基準で em が表すピクセルサイズです。em で書かれた余白やサイズは、それが属するテキストに従い、換算は、一つの特定のテキストサイズでそれがどうなるかを示します。

ページ全体で一つの答えは出せない

これは注意すべき点です。em は、要素自体のフォントサイズ、font-size では親のそれに対する相対値であって、ルートに対するものではありません。そのため同じ 1.5 em は、16 px の要素の中では 24 px、24 px の要素の中では 36 px となり、em の中の em は掛け合わさります。ページの数字は、欄の基準に対してだけ正しく、他の何に対しても正しくありません。どこでも通用する一つの数字が欲しいなら、それが rem の役目です。二つを比べるには、rem を px に換算して、ルート相対の単位がどう固定されたままかを見てください。

丸め

整数の基準を掛けると、ほとんどの値で正確な結果が出ます。基準が小数、たとえば 13.5 px なら、1.2 em のような値は 16.2 px になります。ブラウザは小数のピクセルを扱いますが、極細の罫線やグリッド上のアイコンのように整数のピクセルが必要なときは、意図して丸め、見た目を確認してください。

入れ子の em の値はどう掛け合わさるか

リストの中のリスト

本文が 16 px のページを考えます。リストに font-size: 0.875em があり、それは 14 px です。その中の項目にも font-size: 0.875em があり、それは 14 × 0.875 = 12.25 px です。項目の中のリストがもう一度それを行います。10.7 px です。三段階の深さになるとテキストは小さくなり、誰もそうしようと決めていません。コンポーネントについて em を px に換算して答えが小さすぎるように見えるときは、入れ子が最初に確認すべきものです。

連鎖をたどる

入れ子の em の本当のピクセルサイズを知るには、基準に、下りる途中の各値を掛けます。16 × 0.875 × 0.875 = 12.25。換算ツールは一度に一段階を行います。連鎖では、最初の値を換算し、その答えを二番目の基準に使い、続けてください。それはブラウザが行うのと同じ計算です。

積み重なりを止める方法

フォントサイズには rem を使って、すべてのサイズがルートを参照するようにし、em は間隔に取っておいて、パディングとマージンが自分の要素のテキストに従うようにします。その組み合わせでは何も積み重ならず、換算する em の値は、いつも一目で読めるフォントサイズに対する相対値になります。

よく使う値

ページの下部の表

ページには、設定した基準で一般的な em の数字が対応するピクセル値の表があります。0.5 em は 8 px、0.625 は 10、0.75 は 12、0.875 は 14、1 は 16、1.125 は 18、1.25 は 20、1.5 は 24、2 は 32、3 は 48、4 は 64 です。既定の基準では、これらは rem と同じ数字です。基準を変えれば表も変わり、それは em が実際に何をするかを見るよい方法です。

二つの基準を並べて試す

基準 14 で 1.5 を入力し、次に基準 20 で入力してください。21 と 30 ピクセルが得られます。それが em と rem の違いのすべてを一つの実験にしたものです。同じ数字、二つの要素、二つのサイズです。

ここで em を px に換算する方法

em の値を入力する

最初の欄に em のサイズを入力してください。小数も受け付けるので、1 と同じように 0.714 も使えます。

em が参照するフォントサイズを設定する

要素のフォントサイズ、プロパティが font-size なら親のそれを入力してください。わからなければ 16 のままにして、結果を近似として扱ってください。

ピクセル値を読む

答えはすぐ現れ、隣に基準が表示されます。メモにコピーするか、デザインファイルと比べてください。

これらの単位の由来

em

em はウェブより古いものです。金属活字では鋳造された活字の幅で、大文字の M にちなんで名付けられ、活版の世界では今もエムダッシュやエムスペースと言います。CSS では有効なフォントサイズを意味し、要素を入れ子にすると変わるのはそのためです。

ピクセルと rem

ディスプレイの密度が予測できなくなったとき、実際のピクセルで測ったページは、画面が鮮明になるほど縮むページになりました。そこで CSS ピクセルは基準の長さとして再定義されました。快適な読書の距離で見た約 1/96 インチです。rem は、em の積み重なりから逃れるために加えられました。ルート要素の em であり、決して掛け合わさりません。両方で作業するなら、逆方向へ行くにはpx を em に換算してください。

開発者が em を px に換算するとき

ビルドをデザインファイルと照合する

デザイナーがピクセルでファイルを渡し、コードは em です。ページが一致するか確かめるには、各コンポーネントのフォントサイズを使って em を px に換算します。ラベルが 14 px で、パディングが 0.714em 1.429em のボタンは 10 px と 20 px になるはずで、デザインが 12 と 24 と言っているなら、どちらかが間違っています。

間隔のデバッグ

隙間が大きすぎる、または小さすぎるように見えるとき、原因はたいてい、予想より大きいまたは小さいフォントを参照する em の値です。要素の計算済みのフォントサイズで換算すれば、計算が問題かどうかがすぐわかります。

見慣れないコードを読む

引き継いだスタイルシートは、ピクセルサイズを再構築しなければならない em の値でいっぱいです。主なものをいくつか、正しい基準で換算すれば、デザインの地図が得られます。

ドキュメントとテストを書く

ページをテストする人は、見えるものをピクセルで説明します。パディングは 0.9em だと言う開発者は、テスターにはほとんど何も伝えませんが、12.6 px なら意味があります。換算は、双方が互いを理解する助けになります。

em を px に換算するときの罠

間違った基準を使う

最もよくある誤りです。font-size には親のサイズを、他のすべてのプロパティには要素自身のサイズを使ってください。基準を入力する前にプロパティを確認してください。

em の親を忘れる

親のサイズ自体が em なら、連鎖をたどらなければなりません。開発者ツールの計算済みの値を使えば近道になります。

画面が同じピクセルを示すと思い込む

CSS ピクセルはデバイスピクセルではありません。高密度のディスプレイでは、一つの CSS ピクセルが二つか三つのデバイスピクセルになりえます。換算が与えるのは、デザインツールとスタイルシートが共有する単位の CSS ピクセルです。

答えを約束と取る

読者がテキストを拡大したり、コンポーネントが別のフォントサイズで再利用されたりすれば、ピクセルは、そうなるはずのとおりに変わります。換算された数字は一つの状況を述べるもので、すべてではありません。

換算する前によくある質問

1 em は何ピクセルですか。

有効なフォントサイズと同じだけです。既定の通常の本文では 16 px、24 px の要素の中では 24 px です。

2 em は何ピクセルですか。

有効なフォントサイズの二倍です。16 px なら 32 px です。

なぜブラウザは違うものを示すのですか。

要素の実際のフォントサイズが、入力した基準と違うからです。開発者ツールで計算済みのフォントサイズを読んでください。

em は rem と同じですか。

いいえ。em は要素に対する相対値で、rem はルートに対する相対値です。

入力した数字はアップロードされますか。

いいえ。計算はブラウザ内で行われ、何もどこにも送られません。

逆に戻るにはどうしますか。

掛ける代わりに割る、px から em への変換を使ってください。

em のスタイルシートを理解しやすく保つ習慣

基準にコメントを付ける

padding: 0.75em 1.25em; /* 12px 20px at 16px */ のような行は、数文字のコストで、次の読み手の換算の手間を省きます。前提にした基準が記録されます。

コンポーネントごとにフォントサイズを一度設定する

コンポーネントのフォントサイズをそのルート要素に定義し、内部では em でそれを参照してください。すると基準はコンポーネント内のすべての値で同じになり、それに対して自信を持って em を px に換算できます。

間隔には em、文字には rem

それはほとんどのスタイルシートが落ち着く分け方で、計算を単純に保ちます。画面に対する相対的なサイズには、px から vw への変換とvw から px への変換が道具になります。

別のテキストサイズでテストする

ブラウザの既定のテキストサイズを上げて、ページを見てください。間隔がテキストに従えば、em の値は働いています。従わなければ、何かがピクセルのまま残っています。

厄介な場合の方法

外側から内側へ進む

コンポーネントが他の深い内側にあり、その em の値が紛らわしく見えるときは、サイズがわかっている最も外側の要素から始めて、一段階ずつ換算しながら内側へ進んでください。進むごとに各ピクセルサイズをメモに書きます。二、三段階の後には連鎖全体が紙の上に載り、意外な数字がどこから来るかが正確にわかります。一分で済み、一時間の当て推量に代わります。

単純化するかどうかを決める

レイアウトを理解するのに四段階を通して em を px に換算しなければならないなら、スタイルシートが何かを語っています。フォントサイズを rem に移して、それぞれがルートを参照するようにし、間隔だけを em に残すことを考えてください。ページは同じに見え、来年ははるかに読みやすくなります。

関連する変換ツール

同じ系統のツールが、隣り合う換算をカバーします。em に戻るには、px から em への変換を使ってください。ルート相対のサイズには、px から rem への変換とrem から px への変換があり、画面相対のサイズには、px から vw への変換とvw から px への変換があります。同じスタイルシートの色には、HEX から RGB への変換とRGB から HEX への変換が表記を扱います。

計算例

ボタンのコンポーネントをレビューしているとします。ラベルは 14 px で、CSS には padding: 0.714em 1.429em と、アイコンとラベルの間の 0.5em の隙間があります。基準として 14 を入力し、次に 0.714 を入力して 10 px と読み、1.429 で 20 px と読み、0.5 で 7 px と読みます。デザインファイルは 10、20、8 と言っています。三つのうち二つは一致するので、隙間を見ます。基準 14 での 8 px は 0.571 em になるはずで、誰かが 0.5 に丸めたのです。レビューでそれを指摘すれば、修正は数字一つで済みます。

短いチェックリスト

換算する前に

開発者ツール、またはコード内のフォントサイズの連鎖から、em が参照するフォントサイズを見つけてください。

換算しながら

em の値を入力し、基準を設定して、ピクセルを読み、結果の隣に表示された基準に注意してください。

換算した後に

デザインファイルと比べてください。数字が違うなら、コードを疑う前に基準を確認してください。

よくある間違い

確認せずに 16 を使う

それが正しいのは、要素のフォントサイズが 16 px のときだけです。

em と rem を混同する

似ていますが、動きは違います。それぞれに正しいページを使ってください。

em が積み重なることを忘れる

入れ子の要素の中の値は、見ていないかもしれないサイズに対する相対値です。連鎖をたどってください。

数字は端末の中にとどまります

計算はローカルで行われます。値はあなた自身のブラウザが使い、何もどこにも送られません。後で削除するものも、作成するアカウントもありません。それが em を px に換算する素朴な方法です。

まとめ

ここで em を px に換算するには、em のサイズとそれが参照するフォントサイズを入力し、式 px = em × 基準を使って、結果をすぐピクセルで読みます。換算は、値が使われる場所で有効なフォントサイズに対する比率を保ちます。ページ全体で一つの答えを出すことはできません。em は要素自身、font-size では親に対する相対値なので、同じ 1.5 em は、16 px の要素の中では 24 px、24 px の要素の中では 36 px となり、em の中の em は掛け合わさります。どこでも通用する一つの数字には、rem を使ってください。何もアップロードされません。