1remは何ピクセル？ 専門用語を使わない完全ガイド

1remは何ピクセル？ 専門用語を使わない完全ガイド

最近ウェブデザインを少しかじったり、CSSを書いたりしているなら、おそらく「rem」という言葉に出くわして、「えっ、普通にピクセルを使えばいいんじゃないの？」とすぐに思ったはずです。そしてもっと重要なのは、「具体的に1remは何ピクセルなのか？」ということでしょう。

結論から言うと、余計な説明抜きで答えればこうなります：デフォルトでは、1remは16ピクセルに相当します。

しかし、いたる所に16pxを直書きし始める前に、そもそもなぜremが存在するのか、そしてなぜ固定されたピクセルだけに頼ることが、思った以上にウェブサイトの使い勝手を損なう可能性があるのかについてお話ししましょう。

そもそも「Rem」とは何か？

「Rem」はRoot EMの略です。「em」の由来となる何世紀も前のタイポグラフィの歴史については、あまり気にする必要はありません。現代のウェブデザインにおいて「root（ルート）」とは、単にHTMLドキュメントの基本（根底）部分を指します。

クッキー作りを例に考えてみましょう。「ルート」はマスターレシピです。もしマスターレシピに「1バッチ = 16枚」と書かれていれば、2バッチ（2rem）頼むと32枚のクッキーができます。

後でマスターレシピを変更して1バッチが20枚になるようにした場合、突然2remは40枚を意味することになります。あちこちにある「2バッチ」という指示をすべて書き直す必要はありません。マスタープランを更新するだけで、他はすべて完璧にスケール（拡大・縮小）されます。

ピクセル vs. Rem：対決

ピクセルは固定的です。石板に指示を刻み込むようなものです。16pxは、何があっても画面上で正確に16ピクセルです。

では、視覚障害のあるユーザーが、目を細めずに快適に読めるようブラウザのデフォルトフォントサイズを24pxに変更したとしたらどうなるでしょうか？もしあなたのサイトがピクセルだけで厳密に作られていたら、テキストは16pxに固執したまま動きません。実質的に、ユーザーのブラウザ設定を無視していることになります。

しかし、remを使えば、サイトはユーザーの要望を積極的に聞き入れます。1remは基本的に「ユーザーのデフォルト設定の1倍」を意味します。デフォルトが16pxなら16pxに見えますし、デフォルトが24pxなら、1remのテキストはシームレスに24pxに拡大されます。これはアクセシビリティの向上に即座につながり、すべての人にとってより良いサイトになります。

計算方法（とその回避策）

remをピクセルに変換するのは、単純な掛け算です。ベースとなるピクセルサイズ（通常は16）に、remの値を掛けるだけです。

• 0.5rem = 8px (16 x 0.5)

• 1.5rem = 24px (16 x 1.5)

• 2rem = 32px (16 x 2)

でも、正直に言いましょう。コーディングに集中している時に暗算をしたい人なんていません。2.125remがいくつになるかその場で計算しようとしているなら、電卓を取り出す必要はありません。面倒な計算はツールに任せましょう。

時間を節約するために、以下の非常に便利なコンバーターをブックマークしておきましょう：

• remの値はあるけれど、実際どのくらいの大きさに見えるか知りたい？こちらのRemからピクセルへのコンバーターを使ってください。

• Figmaのデザインをピクセル単位で眺めながらCSSに変換する必要がありますか？ピクセルからRemへのコンバーターへどうぞ。

デベロッパー用チートシート

よく使われるサイズの早見表が必要なら、こちらのチートシートをどうぞ。これはブラウザの標準的なデフォルトサイズである16pxを基準にしています。

一般的な用途	ピクセル換算	REM値
小さなUIの間隔やボーダー	4px	0.25rem
マージン、パディング、小さな隙間	8px	0.5rem
小さいテキスト、キャプション、メタデータ	12px	0.75rem
デフォルトの本文テキスト	16px	1rem
小見出し、導入文	20px	1.25rem
H3見出し、大きなボタン	24px	1.5rem
H2見出し、セクションタイトル	32px	2rem
H1見出し、ヒーローテキスト	48px	3rem