Web単位の「px・rem・em」使い分け決定版！レスポンシブ設計で失敗しないための実務ガイド

なぜ、あなたの作ったサイトは「デバイスによって崩れる」のか？

男の子

「博士！助けてくれだぜ！デザイン通りに作ったはずなのに、スマホで見ると文字がデカすぎたり、画像がぼやけたりして、もうめちゃくちゃなんだぜ！」

博士

「フォッフォッフォ、それはWebの『単位』の迷宮に迷い込んだようじゃな。現代のWebは、絶対的な長さではなく『相対的な関係性』で設計しなきゃいかんのじゃ。」

女の子

「もう、アンタはいつも px 固定で書くからよ。Retinaディスプレイの仕組みとか、ユーザーのブラウザ設定を無視しちゃダメでしょ？博士、単位の黄金律を教えてあげて！」

1. ピクセル（px）の嘘と、デバイスピクセル比（DPR）の罠

博士

「CSSの 1px は、実はディスプレイの『1ドット』ではないんじゃ。Retinaディスプレイでは、実際には4ドット以上使って表現されておるんじゃよ。」

男の子

「ええっ！ 1px なのに1ドットじゃないのか！？なんだか騙された気分だぜ！だから画像がぼやけて見えたのか…。」

女の子

「pxはあくまで『仮想の単位』なの。フォントサイズには rem, 幅には % や vw を使うのが今の常識よ。境界線だけは px を死守するのがコツね！」

実務チェックポイント

フォントサイズ：ユーザーの設定を尊重する rem を優先。
レイアウト幅：画面に追従する % や vw を活用。
境界線（Border）：計算ズレを防ぐため、ここだけは px を死守。

2. 最強の救世主「rem（レム）」：アクセシビリティへの架け橋

博士

「 rem はルートのフォントサイズを基準にする単位じゃ。これを使えば、ユーザーがブラウザ設定で文字を大きくしても、サイトがそれに応えてくれるんじゃよ。」

男の子

「ユーザーの設定を尊重する…なんだかおもてなしみたいだぜ！でも em とは何が違うんだ？」

女の子

「 em は親要素を基準にするから、入れ子になると計算が雪だるま式に大変になるの！基本は rem を使い、局所的に em を使うのがプロの使い分けよ。」

🚨 現場の注意点：em と rem の混同

em は「親要素」を基準にするため、入れ子構造になると計算が雪だるま式に複雑になり、意図しないサイズ崩れを招きます。基本は rem を使い、コンポーネント内のアイコンサイズなど、局所的なスケーリングにのみ em を使うのがプロの使い分けです。

3. 実務を加速させる「最新関数」と「変換ツール」の活用

博士

「最近は clamp() 関数という便利なものもあってな。スマホとPCでサイズを滑らかに変えられるぞい。」

男の子

「一行で書けるのか！？でも『この24pxは何remなんだっけ？』って電卓叩くのが面倒くさいぜ！」

女の子

「だから当サイトの変換ツールを使うのよ！一瞬で相互変換できるから、計算のストレスから解放されるわ。クリエイティブなことに集中しなさいよ！」

正しい単位を使いこなし、ユーザーに優しく、メンテナンスしやすいコードを目指そう

まとめ：単位の選択は「おもてなし」である

男の子

「博士、僕、もう px 地獄には戻らないぜ！ rem を使いこなして、呼吸するようなサイトを作るぜ！」

女の子

「保守性も上がるし、いいことずくめね。みんなも正しい単位でおもてなししましょう！」

博士

「フォッフォッフォ、ルートのサイズを変えるだけで全体が広がる快感、ぜひ味わってみるのじゃぞい！」

パソコン博士

「最近の若いもんは rem ばっかり使いおって…」とボヤく老兵もいるが、実は rem を使う最大のメリットは「保守性」なんじゃ。後から「サイト全体の余白をちょっと広げたいな」となった時、ルートのサイズを1px変えるだけで、サイト全体が呼吸するように一斉に広がる。この快感を知ったら、もうpx地獄には戻れんぞい！