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

px を em に変換する理由

em は CSS で最も古い相対単位で、最も議論を呼ぶものでもあります。デザインファイルからピクセルでのサイズ、たとえばボタンの 20 px のパディング、アイコンの横の 14 px の空き、見出しの 36 px を受け取り、それが属するテキストに追随するように、em で表したいのです。px を em に変換するとき、あなたは特定の問いをしています。これは現在のフォントサイズの何倍か。答えは、ページが推測できない数、つまりその値が使われる場所で有効なフォントサイズによって決まるので、変換ツールはその数を入力欄に置いて、率直に使います。

サイズを em で書く理由は、テキストに属するものはテキストとともに大きくなるべきだからです。ボタンの中のパディングは、ボタンのラベルが大きいときには大きくなるべきです。アイコンとそのキャプションの間の隙間は、キャプションが広がれば広がるべきです。見出しの下の余白は、見出しと比例を保つべきです。これらのどの場合も、フォントサイズが変わるとすぐにピクセルの値は間違いになり、em の値はどんなサイズでも正しいのです。それが em の根拠のすべてで、強い根拠です。

計算はお使いのブラウザー内で行われ、何もアップロードされません。以下では、式、em が rem より注意を要する理由、驚くようなサイズを生む入れ子の罠、em が正しい単位である場所、そして実際のスタイルシートで em と rem のどちらにするかを選ぶ方法を説明します。

式と基準

em は px をフォントサイズで割ったもの

式は割り算一つです。em = px ÷ 基準。基準が 16 px なら、24 px は 1.5 em に、8 px は 0.5 em に、20 px は 1.25 em になります。ページは結果の隣に基準を、24 px = 1.5 em (16 px) のように示すので、何が想定されたかがわかります。算術は rem と同じです。意味が違います。

基準とは何か

rem では、基準はルート要素のフォントサイズです。em では、値が使われる要素のフォントサイズ、あるいは font-size プロパティ自体については、親のフォントサイズです。だから em には一つの答えがありません。同じスタイルシートの値が、場所によって異なるピクセルサイズを意味するのです。テキストが 14 px のボタンのパディングを変換するなら、基準に 14 と入力してください。32 px の見出しの余白を変換するなら、32 と入力します。

わからないときの初期値

大まかな数字がほしいだけなら、基準は 16 のままにしてください。誰も変更していないブラウザーでの普通のテキストのサイズです。結果は通常の本文のかたまりには正しく、要素が別のサイズであることがわかっても、比率の感覚が得られます。

変換が保つものと、できないこと

テキストに対する比率は保たれる

結果は、その値が使われる場所で有効なフォントサイズに対する比率です。em で書かれた空きは、隣のテキストとともに大きくなり小さくなり、それはまさに、言葉の周りの間隔が振る舞うべき姿です。

ページに一つの数字は与えられない

これは注意すべき点です。em は、ルートではなく、要素自身のフォントサイズ、あるいは font-size については親のフォントサイズに相対的です。したがってページには一つの答えがありません。同じ 1.5 em が、16 px の要素の中では 24 px、24 px の要素の中では 36 px であり、em の中の em は掛け合わされます。ページの数字は、欄にある基準に対してだけ正しく、ほかには正しくありません。どこでも通用する一つの数字がほしいなら、そのために rem があります。比べるには、px を rem に変換して、同じピクセルの値がどう振る舞うかを見てください。

丸め

16 で割ると、多くのサイズできれいな値が、ほかでは循環小数が得られます。0.8125 em のような値はスタイルシートでは問題ありませんが、正確なサイズが重要でないなら、0.8 や 0.85 に丸めるほうがよいかもしれません。精度が重要なところでは、完全な数字を保ってください。

入れ子の罠

em が積み重なる仕組み

リストが font-size: 0.875em をもち、その項目も font-size: 0.875em をもつとします。リストは親の 87.5% です。各項目はリストの 87.5%、つまり親の約 76.6% です。項目の中に入れ子になったリストは、さらに約 67% まで縮みます。三段階を過ぎると、テキストは非常に小さくなり、誰もそれを意図して書いていません。これが、em は積み重なると言われる意味です。

px を em に変換するときに重要な理由

ピクセルの値を font-size の em に変換するなら、使うべき基準は、要素自身ではなく、親のフォントサイズです。多くの間違いは、間違ったほうを使うことから来ます。パディングや余白のようなほかのプロパティでは、基準は要素自身のフォントサイズです。規則は言うのは簡単で、忘れるのも簡単です。font-size は上を見て、ほかのすべては自分自身を見ます。

驚きを避ける方法

テキストに追随する間隔には em を、フォントサイズには rem を使ってください。そうすれば、フォントサイズはルートを参照するので積み重なることがなく、間隔は自身のテキストに追随し続けます。現代のほとんどのスタイルシートが落ち着く組み合わせです。

よくあるサイズ

ページの下部の表

変換ツールの下には、設定した基準でのよくあるサイズの表があります。8 px は 0.5 em、10 px は 0.625、12 px は 0.75、14 px は 0.875、16 px は 1、18 px は 1.125、20 px は 1.25、24 px は 1.5、32 px は 2、48 px は 3、64 px は 4 です。基準が 16 なら、これらは rem と同じ数字で、だから人は二つを混同します。違いは、16 が何を表すかにあります。

要素に合わせて基準を変える

小さなボタンのために基準を 14 に設定すると、表が変わります。14 px は 1 em に、7 px は 0.5 em に、21 px は 1.5 em になります。試してみてください。1.5 em のパディングが、14 px のボタンでは 18 px のボタンとは異なるピクセルサイズになる様子と、それがなぜ役立つかがわかるでしょう。

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

ピクセルの値を入力する

最初の欄にピクセルでのサイズを入力します。小数も受け付けられます。

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

要素のフォントサイズ、font-size を変換するなら親のフォントサイズを入力します。わからなければ 16 のままにして、結果を近似として扱ってください。

em の値をコピーする

数字を単位つきで CSS に使ってください。padding: 1.25em のようにです。単位のない数字は、ほとんどのプロパティで有効ではありません。

これらの単位の由来

金属活字の em

em はウェブより古いものです。金属活字では、大文字の M にちなんで名づけられた鋳造ブロックの幅であり、印刷された行の水平方向の間隔の自然な単位でした。活版の専門家は今も、エムダッシュやエムスペースについて語ります。CSS では、その考えがより緩い形で生き残っています。一 em は、現在のフォントの大きさです。

ピクセルと rem

CSS のピクセルは、画面上の点ではなく、心地よい読書距離で見た 1/96 インチ程度の基準の長さです。rem は、相対的でありながら決して積み重ならない単位を開発者に与えるために加えられました。それはルート要素の em です。ピクセル、em、rem の三つで、三つの必要をまかないます。固定のサイズ、テキストに相対的なサイズ、ページに相対的なサイズです。

em が正しい選択である場所

ボタンとフォーム欄の中のパディング

padding: 0.5em 1em のボタンは、どんなテキストサイズでも比率が同じに見えます。ラベルを大きくすれば、ボタン全体がそれとともに大きくなり、それはツールバーでもヒーローバナーでも使われるかもしれない部品に望むことです。

アイコンの横の間隔

アイコンにキャプションが続くとき、キャプションに合わせて拡大縮小する隙間が必要です。0.4em の余白はそうしますが、6px の余白はそうしません。

見出しと段落の周りの余白

文書の縦のリズムは、段落の間隔が em だと保ちやすくなります。段落のサイズに追随するからです。em での見出しの余白は、見出しが異なるブレークポイントでサイズを変えても、比例を保ちます。

メディアクエリ

em で書かれたブレークポイントは、読者のテキストサイズに反応するので、テキストを拡大した人には、レイアウトがより早く狭い形に切り替わります。メディアクエリでは、em はどの要素でもなくブラウザーの初期設定を参照するので、積み重なりません。

px を em に変換するときの落とし穴

間違った基準を使う

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

親も em かもしれないことを忘れる

親のフォントサイズ自体が em なら、本当のサイズを知るために、連鎖を上にたどらなければなりません。スタイルシートが複雑になったら、フォントサイズを rem に切り替え、em は間隔のために残してください。

部品全体に一つの数字を期待する

異なるサイズのテキストを含む部品には、その各部分に単一の em の値はありません。各部分を、それ自身の基準に対して変換してください。

同じプロパティに em と rem を混ぜる

1rem のパディングの隣に 1em の余白があるのは、合法ですが、しばしば混乱を招きます。フォントサイズには rem、間隔には em のように規則を選んで、それを守ってください。

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

16 px は何 em ですか？

有効なフォントサイズが 16 px なら、一です。要素のフォントサイズが 20 px なら、16 px は 0.8 em です。

em は rem より優れていますか？

どちらも優れてはいません。rem はフォントサイズと全体のレイアウトに向いています。em は、自身のテキストに追随すべき間隔に向いています。

パディングが予想より大きいのはなぜですか？

それが要素のフォントサイズに相対的で、想定より大きいかもしれないからです。ブラウザーの開発者ツールで、計算されたフォントサイズを確認してください。

小数は使えますか？

はい。0.625em や 1.333em のような値は普通です。

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

いいえ。算術はお使いのブラウザー内で実行され、何もどこにも送られません。

元に戻すには？

割る代わりに掛けるem を px に変換を使います。

px を em に変換するときの賢い選び方

値が何に属するかを決める

それがテキストに属するなら、em が正しいです。ページに属するなら、たとえば列の幅やセクションの間隔なら、rem かビューポート単位のほうが合います。px を vw に変換は、サイズを画面幅の割合として表します。

意図をコメントに書く

padding: 0.75em 1.25em; /* 12px 20px at 16px */ のような行は、理由を見えるようにします。あとでフォントサイズが変わったとき、その数字が何を意味していたのかがわかります。

部品のフォントサイズを一か所に保つ

フォントサイズを部品のルート要素に設定し、中のすべてがそれを参照するようにしてください。そうすれば、部品の中の em の値はどこでも同じ意味をもち、単一の基準に対して px を em に変換できます。

px を em に変換するときの良い習慣

px を em への変換は一部品ずつ

スタイルシート全体を一度に px から em に変換しようとしないでください。カードやボタンのような部品を一つ取り、そのフォントサイズを決め、その間隔の値をそれぞれそのサイズに対して変換します。部品ができたら、二つか三つのテキストサイズで試してください。それから次に進みます。

きりのよい値ではなく、半端な値に計算機を使う

8、16、24 ピクセルのような値は、基準が 16 ならきれいな em の数字に変換されます。22 や 13 のような半端な値は、長い小数になります。これらについて px を em に変換するときは、デザインが本当に正確な数字を必要とするのか、最も近いきりのよい em の値で同じように良いのかを決めてください。デザイナーはしばしば丸めることに満足し、整ったスタイルシートのほうが保守しやすいのです。

基準の記録を残す

各 em の値の隣に、基準が何だったかを記した短いコメントがあると、次の人の助けになります。あとで誰かが部品のフォントサイズを変えても、間隔が偶然ではなく設計としてそれに追随することがわかります。それを一度書き留めておくことは、かかる時間に見合います。

rem の相当と比べる

値に em と rem のどちらが合うかわからないなら、px を em にも rem にも変換して、テキストサイズが変わったときに何が起こるべきかを自問してください。値が要素自身のテキストに追随すべきなら、em を取ります。ページに追随すべきなら、rem を取ります。

関連する変換ツール

同じ系統のツールが、隣接する変換を担います。ピクセルに戻るには、em を px に変換を使ってください。ルートに相対的なサイズには、px を rem に変換とrem を px に変換があり、画面に相対的なサイズには、px を vw に変換とvw を px に変換があります。同じスタイルシートの色には、HEX を RGB に変換とHEX を HSL に変換が表記を扱います。

実例

ボタンのラベルが 14 px で、デザインがボタンに 10 px の縦のパディングと 20 px の横のパディングを与えているとします。基準に 14 を、続いて 10 を入力して 0.714 em を読み、20 を入力して 1.429 em を読みます。スタイルシートには padding: 0.714em 1.429em と書きます。同じボタンが 18 px のラベルのヒーローで使われると、パディングは比例して 12.9 px と 25.7 px になります。10px と 20px と書いていたら、ボタンは大きなテキストの周りで細く見えたでしょう。

短いチェックリスト

変換する前

値がどのプロパティに属するかを決め、それが相対すべきフォントサイズを見つけてください。

変換している間

ピクセルの値と正しい基準を入力し、em の数字を単位つきでコピーしてください。

変換したあと

ブラウザーで部品のフォントサイズを変えて、間隔が追随することを確認してください。積み重なる入れ子の em の値がないか探します。

よくある間違い

パディングの基準にルートのサイズを使う

それは rem の仕事です。em は要素自身のフォントサイズを参照します。

すべてのフォントサイズに em を使う

入れ子の em のフォントサイズは積み重なって、驚かされます。フォントサイズには rem を使ってください。

見た目はきれいだが間違った数字に丸める

1.43 は、大きなフォントに掛けると 1.5 と同じではありません。十分な桁を保ってください。

数字は端末の中にとどまる

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

まとめ

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