CSSを少しでもいじったことがあるなら、デザインのモックアップを見つめながら、「ここはピクセルを使うべきか、それともrem値にするべきか？」と悩んだことがあるのではないでしょうか。
フルHDの画面幅（具体的には1920px）を扱っていて、それをremに変換したいのであれば、まさにうってつけの場所です。正確な計算方法を分解し、超シンプルな例えを使ってなぜそうなるのかを説明し、すぐにコーディングに戻れるようにします。
結論：1920pxをremに変換すると
結論から言いましょう。Webサイトがブラウザの標準的なデフォルトフォントサイズである16pxを使用している場合、1920pxはちょうど120remになります。
どのようにその数値になったのでしょうか？単純な割り算です：
1920 ÷ 16 = 120
以上です。ですが、なぜ16で割るのか、そもそもなぜremを使うのか、あるいはこの計算を完全に回避する方法を知りたい方は、もう少し付き合ってください。
（プロのアドバイス：頭の中で数字を計算するのに疲れたら、便利なpxからremへの変換ツールをブックマークして、面倒な計算を任せてしまいましょう。）
ピクセル vs. Rem：「お菓子作り」で例えると
Webデベロッパーがなぜこれほどremにこだわるのかを理解するには、パソコンから離れてキッチンに向かうとわかりやすいでしょう。
ピクセル（px）は、固い金属製のケーキ型のようなものだと考えてください。9インチのケーキ型があれば、それはいつでも9インチです。2人分のケーキを焼こうが20人分だろうが関係ありません。型は頑なにサイズを変えません。Webデザインにおいて、ピクセルは厳格で絶対的な単位です。ボックスを1920pxに設定すると、ユーザーが小さなスマートフォンで見ようが、視力が非常に悪くてすべてを拡大表示する必要があろうが、1920pxのまま変わりません。
一方、remは柔軟なレシピのようなものです。「1人あたり小麦粉1カップ」というパンケーキのレシピを想像してみてください。1人が食べるなら1カップを使います。4人が食べるなら、自動的に4カップにスケールアップします。
CSSにおいて、remは「root em」の略です。これはルート（ユーザーがブラウザで設定している基準フォントサイズ）を参照し、そこからすべてを比例してスケーリングします。
魔法の数字：16
デフォルトでは、世の中のほぼすべてのWebブラウザがルートフォントサイズを16pxに設定しています。
そのため、CSSでコンテナの幅を1remにするように指示すると、ブラウザは「了解、基本サイズは16pxだから、このコンテナの幅を16pxにしよう」と判断します。
幅1920ピクセルのフルHDラッパーを作成したい場合は、自分自身に問いかけるだけです：「1920の中に16はいくつ入るだろうか？」
1920 ÷ 16 = 120
スタイルシートにmax-width: 120rem;と記述すれば準備完了です。ちなみに、逆算が必要になった場合（他の人のコードを読んでいて「一体120remって通常の画面で言うと何ピクセルなんだ？」と思った時など）は、いつでもremからpxへの変換ツールを使って逆算できます。
なぜ気にする必要があるのか？（アクセシビリティの観点）
「計算なんて面倒くさい。普通に1920pxと入力して終わりにすればいいのでは？」と思うかもしれません。
もちろんそれでも構いません。しかし、remを使って構築すると、ズームイン（拡大）が必要なユーザーにとってWebサイトが非常に親切になります。視覚障害のあるユーザーがブラウザのデフォルトフォントサイズを16pxから24pxに変更した場合、すべてpxで作られたサイトは頑固に同じサイズを維持するため、テキストが重なったり読めなくなったりすることがよくあります。
サイトをremで構築していれば、レイアウト全体がユーザーの設定を尊重して適切に拡大・縮小（スケーリング）されます。これは実質的に魔法のようなものであり、アクセシビリティに気を配れる一流のデベロッパーのように見せることができます。
CSSクイックチートシート
CSSを書くたびに電卓を取り出したくない人のために、標準的な16pxルートに基づいたクイックリファレンスガイドをご用意しました。
公式： 変換したいピクセルサイズ ÷ 16 = rem値
- 16px = 1rem （基本サイズ）
- 24px = 1.5rem
- 32px = 2rem （標準的な見出しに最適）
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem （一般的なタブレットのブレークポイント）
- 1024px = 64rem （標準的なデスクトップのブレークポイント）
- 1440px = 90rem （大型デスクトップ）
- 1920px = 120rem （フルHDモニター）
次に1920pxのデザインを見つめることになったら、この柔軟なレシピのアプローチを思い出してください。16で割って、120remを記述し、素晴らしいWebサイトをどんどん構築していきましょう！