PX vs REM vs EM | どのCSS単位を使うべき？
正直に言いましょう。CSSでサイズを決めるのは、全く別の言語を学んでいるように感じることがあります。シンプルなウェブページをスタイリングしようと座った途端、アルファベットのスープのような単位の山に直面します。
「この段落は16pxにすべきか？それとも1rem？待てよ、そもそもemって何だっけ？」
レイアウトがそれっぽく見えるまで適当に単位を当てずっぽうで選んだことがあるなら、間違いなくあなただけではありません。それはフロントエンド開発者なら誰もが通る道です。しかし、これら3つの単位が舞台裏でどのように機能しているかを理解すれば、CSSは魔法のようなものではなく、予測可能なツールキットに変わります。
専門用語を抜きにして、実生活の例えを使いながら、px、em、remについて詳しく解説していきます。
ピクセル (px)：頑固な定規
ピクセルは、絶対に伸び縮みしない生地で作られたオーダーメイドのスーツのようなものだと考えてください。ボタンの幅を200px、テキストサイズを16pxに指定したら、きっかりその通りになります。それでおしまいです。これは絶対単位です。
ピクセルは、巨大な4Kモニターでサイトを見ているか、5年前の小さなスマートフォンで見ているか、あるいはユーザーが老眼鏡を忘れてブラウザのデフォルトフォントサイズを大きくしているかなんて、これっぽっちも気にしません。ピクセルはどこまでいってもピクセルです。
良い点： 予測可能です。何が得られるか正確にわかるので、厳密なレイアウトを構築する際に非常に考えやすいです。 悪い点： アクセシビリティには最悪です。フォントサイズをピクセルでハードコードしてしまうと、視覚障害のあるユーザーがブラウザのデフォルトフォントサイズを拡大しようとしても、16pxのテキストは頑固に大きくなることを拒みます。
Em (em)：伝言ゲーム
ピクセルが硬直的なら、em単位はその真逆です。（豆知識：この名前は、もともと大文字の「M」の幅に基づいた伝統的なタイポグラフィの測定単位に由来しています！）。emは相対単位であり、そのサイズを周囲の状況、具体的にはその直親要素に基づかせます。
em単位は、伝言ゲーム、あるいはマトリョーシカ人形のようなものだと考えてください。親コンテナのフォントサイズが16pxで、子要素に2emというフォントサイズを指定すると、その子は親の2倍のサイズ（つまり32px）になります。
いい感じに聞こえますよね？それらを入れ子（ネスト）にするまでは。
例えば、リストの中にリストがあり、さらにその中にリストがあるとします。すべてのliタグを1.5emに設定すると、最初のリストは通常の1.5倍になります。入れ子になったリストはその1.5倍になります。3番目のリストはさらにその1.5倍になります。突然、テキストが巨大な文字になって画面いっぱいに広がり、ユーザーに叫んでいるかのようになります。これは「複利問題（compounding problem）」として知られており、多くの開発者が悲鳴を上げてem単位から逃げ出す理由です。
要素を入れ子にすると計算が驚くほど複雑になるため、これらを頭の中で計算するのはおすすめしません。自分を助けるために、ピクセルからemへのコンバーターをブックマークして、事態が厄介になったときに正気を保てるようにしましょう。
Rem (rem)：時計をグリニッジ標準時に合わせる
rem単位は、emの複利の悪夢を解決するために特別に考案されました。
“Rem”はRoot Emの略です。サイズを決定するためにすぐ上の親を見るのではなく、remはウェブページの最上部、つまり「ルート」（<html>要素）までさかのぼって確認します。
rem単位は、時計をグリニッジ標準時のような世界標準に合わせるようなものだと考えてください。世界のどこにいても（あるいはHTMLツリーのどれほど深い場所に要素が入れ子になっていても）、全員が全く同じ時計を参照しています。
デフォルトでは、ほとんどのブラウザがルートのフォントサイズを16pxに設定しています。したがって、1remは16px、2remは32px、0.5remは8pxに相当します。デザインファイルをコードに変換するたびに暗算したくない場合は、便利なピクセルからRemへのコンバーターを使ってワークフローをスピードアップしましょう。
remの真の魔法： ユーザーが大きなテキストを必要として、ブラウザの設定でデフォルトのテキストサイズを24pxに変更した場合、サイト全体が自動的に美しく比例してスケールアップします。なぜなら、remで構築されたものはすべて、そのルートの数値に基づいているからです！
では、実際にはどれを使うべき？
秘訣はこれです：一つだけを選んで他を捨てる必要はありません。優れた開発者は3つすべてを使いますが、それぞれ非常に特定の役割に使用します。
具体的なアプローチは以下の通りです：
1. ほとんどすべてのことに rem をデフォルトにする。
フォントサイズ、マージン、パディング、最大幅など、remを使いましょう。これにより、サイトのアクセシビリティが非常に高まり、ユーザーがブラウザの設定を微調整しても、すべてが比例してスケールされるようになります。これは現代のウェブデザインにおける疑いようのないゴールドスタンダードです。
2. 絶対にスケールさせたくないものには px を使う。
カードの周りに1pxの細いボーダーを引く場合、ユーザーがフォントサイズを大きくしたからといって、そのボーダーが分厚くて不格好な3pxのブロックになってほしくはないでしょう。ボーダー、ボックスシャドウ、そして時には複雑なレイアウトでの精密な位置決めにpxを使用します。
3. モジュール式のコンポーネントには em を使う。
その要素自体のフォントサイズに合わせて余白をスケールさせたい場合にemを使います。例えば、ボタンを想像してみてください。巨大な「今すぐ購入」ボタンでも、小さな「送信」ボタンでも、テキストの周囲のパディングが常に比例して見えるようにしたいはずです。ボタンのパディングをemで設定しておけば、ボタンのフォントサイズを変更するだけで、パディングはそれに合わせて自動的に完璧に拡大・縮小されます。