なぜWebデザインでピクセルを使うのを今すぐやめるべきなのか（そしてRemに切り替えるべき理由）
正直に言いましょう。かつてWebデザインは驚くほど簡単でした。昔は、誰もが全く同じ、かさばるデスクトップモニターを眺めていたものです。段落に16pxのフォントサイズを指定し、メインコンテナに固定幅を設定すれば、それで一日が終わりました。
しかし、状況は大きく変わりました。今や、ポケットサイズのスマートフォンから、巨大なウルトラワイドモニター、タブレット、さらにはスマート冷蔵庫にまで対応させようとしています。Webはもはや静止したポスターではありません。流動的で生きているものです。もし、いまだにピクセル（px）だけで構築しようとしているなら、それは水に拘束衣を着せようとしているようなものです。
今こそ相対単位について話す時です。正直なところ、px を捨てて rem を採用することは、身につけられる最高の習慣の一つです。ストレスが減り、コードがきれいになり、そして何より、ユーザーにとって圧倒的に良い結果をもたらします。
ピクセルの問題点（別名：コンクリート・アプローチ）
なぜ rem がそれほど素晴らしいのかを理解するために、まずは、なぜモダンなWebデザインにおいてピクセルが少し「イマイチ」なのかを見てみましょう。
ピクセルをコンクリートを流し込むようなものだと考えてみてください。一度固まってしまったら、動かせません。ブラウザに見出しが24pxだと伝えたら、何があろうと24pxのままです。ピクセルはいわば、CSS界の「コントロールフリーク（仕切り屋）」です。ユーザーが画面を細めて見ていようが、視力が弱いためにブラウザの設定でデフォルトのフォントサイズを大きくしていようが、お構いなしです。
ピクセルは一歩も譲りません。「いや、デザイナーが24ピクセルと言ったんだから、きっちり24ピクセルだ」と言い張ります。
この硬直性は、アクセシビリティにとって悪夢です。人々に絶対的なサイズを強制すると、コンテンツをどのように消費するかをコントロールする能力を奪ってしまうことになります。
REMの登場：CSS界のスマートサーモスタット
ピクセルが流し込まれたコンクリートなら、rem は家全体のスマートサーモスタットのようなものです。
Rem は「Root Em」の略です。技術的な歴史で退屈させるつもりはありませんが、知っておくべきなのは、rem 単位はそのサイズを完全にドキュメントのルート（<html> タグ）に基づいているということです。デフォルトでは、ほぼすべてのWebブラウザがルートのフォントサイズを16pxに設定しています。
そのため、段落のテキストを 1rem に設定すると、ブラウザはそれを16pxと解釈します。見出しを 2rem に設定すれば、ブラウザは単純に計算します：2 x 16 = 32px。
スケーリングの魔法
ここで、スマートサーモスタットの例えが実際に意味を持ってきます。
例えば、あるユーザーがあなたのサイトを訪れたとします。その人は視力が弱く、ブラウザの設定でデフォルトのフォントサイズを標準の16pxから、24pxのような大きなサイズに変更しています。
- ピクセルでサイトを構築した場合： あなたのコードはユーザー設定を完全に無視します。16pxのテキストは16pxのままです。ユーザーは不便なズーム操作を強いられ、せっかく作り込んだレイアウトは崩れ、たった一行を読むために横スクロールをさせられることになります。これは非常にストレスが溜まる体験です。
- Remでサイトを構築した場合： あなたのサイトはユーザーを尊重します。テキストが
1remに設定されているため、ブラウザは新しいデフォルト値（24px）を見て、「よし、1remは24pxだな」と判断します。フォント、パディング、マージンなど、サイト上のすべてが完璧に、かつ比例してスケールアップします。
追加のCSSを一行も書く必要はありませんでした。レイアウトがユーザーの必要としているものに適応したのです。
今すぐ切り替えるべき理由
px から rem への移行は、単なる開発者のトレンドではありません。ユーザーエクスペリエンスをどのように扱うかという根本的な転換です。
- アクセシビリティ（A11y）における大きな勝利： Webはすべての人のためのものであるべきです。remを使うことで、カスタムブラウザ設定を頼りにしている視覚障害のあるユーザーが、CSSと戦うことなくコンテンツを読めるように配慮できます。
- レスポンシブデザインが圧倒的に楽になる： モバイル向けにサイト全体のタイポグラフィを縮小したいですか？ピクセルを使っていたら、すべてのフォントサイズを変更するために何十ものメディアクエリを書く羽目になります。remなら、ルートのフォントサイズを一度変えるだけで、他のすべてが自動的にスケールダウンします。正直、ズルをしているような気分になるほど簡単です。
- 将来への備え（フューチャープルーフ）： 奇妙な画面サイズの新しいデバイスが常に登場しています。相対単位を使えば、デザインはプレッシャーで壊れる（スナップする）のではなく、柔軟に伸縮し、呼吸することができます。
「いつ何を使うか」のカンニングペーパー
いいですか、ピクセルを完全にゴミ箱に捨てる必要はありません。モダンデザインにおいても、まだわずかな居場所はあります。移行するための、手っ取り早く実用的なガイドがこちらです：
rem を使うべき場所：
- フォントサイズ（見出し、段落、ボタン）
- 余白（マージンとパディング）
- 主要なレイアウトコンテナの幅と高さ
px を使うべき場所：
- 絶対にスケールアップすべきではない、ごく微細なディテール。カードの周りの1pxのボーダーや、かすかなボックスシャドウなど。
黄金の計算式：
- 1rem = 16px (ブラウザのデフォルト)
- 1.5rem = 24px
- 2rem = 32px
（プロのヒント：暗算が嫌いなら、Px to Rem 変換ツールをブックマークして、面倒な計算は任せてしまいましょう！）
rem を受け入れるということは、絶対的なコントロールをほんの少し手放す代わりに、サイトを実際に利用する人々にとって、はるかに優れた、柔軟で、アクセシブルな体験を構築することを意味します。コンクリートはどのみちひび割れていくものです。流動的なものを作り始める時が来ました。