【CSS】今更ながらremの基準、どっちが正解？「1rem=10px」と「1rem=16px」を徹底比較！

Webサイトのコーディングで欠かせないCSSの単位。その中でも、レスポンシブデザインやアクセシビリティの観点から「rem」は非常に重要な単位です。

しかし、このremを使う上で、Web開発者の間でも意見が分かれる一つのテーマがあります。それが、「ルートのフォントサイズをどう設定するか？」という問題です。

具体的には、

• 1rem = 10px になるように設定する派
• ブラウザのデフォルトである 1rem = 16px のまま使う派

の2つの考え方です。

「計算が楽だから10pxが良い」「いや、アクセシビリティを考えるなら16pxのままだ」といった声が聞こえてきます。

この記事では、この2つのアプローチを徹底比較！それぞれのメリット・デメリットを解説し、2025年現在、どちらの方法がベストプラクティスとされているのかを明らかにします。

「1rem = 10px」派の主張と実装方法

まずは、計算が楽になると言われる「1rem = 10px」にする方法です。

どうやって設定するの？

多くのブラウザのデフォルトフォントサイズは16pxです。これを10pxにするために、html要素に以下のCSSを記述します。

html {
  /* 16px の 62.5% = 10px */
  font-size: 62.5%;
}

たったこれだけで、1remが10pxとして扱われるようになります。

メリット：開発者にとって計算が圧倒的に楽！

この方法の最大のメリットは、開発時の計算が非常に直感的になることです。

• 12px にしたければ → 1.2rem
• 18px にしたければ → 1.8rem
• 24px にしたければ → 2.4rem

このように、pxの値を10で割るだけなので、デザインカンプから数値を拾う際に、頭の中で瞬時に変換できます。開発効率が上がる、というのがこの手法の大きな魅力です。

「1rem = 16px」派の主張と実装方法

次に、ブラウザのデフォルト設定を尊重する「1rem = 16px」のまま使うアプローチです。

どうやって設定するの？

何もしません。

html要素のfont-sizeを敢えて指定せず、ブラウザの標準設定に任せます。これにより、1remはブラウザのデフォルトである16pxを基準とします。

メリット：ユーザーのアクセシビリティを最大限に尊重できる

こちらのメリットは、何と言ってもアクセシビリティの向上です。この点については、次のセクションで詳しく解説します。

---

【結論】推奨は「1rem = 16px」！ユーザー視点で考えてみよう

計算が楽な「10px」設定は魅力的ですが、現在のWeb制作では「1rem = 16px」のまま使うことが強く推奨されています。

なぜなら、この選択は「誰のためのWebサイトなのか？」という根本的な問いに繋がるからです。ここで、具体的なシナリオを想像してみましょう。

シナリオ１：「1rem = 10px」設定のサイトで起こること

1. ユーザーの状況
   あるユーザーが、文字を読みやすくするために、お使いのブラウザの基本の文字サイズを「大（20px）」に設定したとします。
   
2. サイトの表示
   そのユーザーが「html { font-size: 62.5% }」が設定されたサイトを訪れると、サイトはユーザーの「20px」という設定を上書きし、20px * 0.625 = 12.5px というサイズを基準にしてしまいます。
   
3. 結果
   ユーザーは文字を大きくしたかったにも関わらず、意図に反して通常よりも小さな文字で表示されてしまいます。これは、開発者の都合のためにユーザーの体験を損なってしまう、アクセシビリティ上、非常に大きな問題です。
   

シナリオ２：「1rem = 16px」設定のサイトで起こること

1. ユーザーの状況
   先ほどと同じ、ブラウザの文字サイズを「大（20px）」に設定したユーザーです。
   
2. サイトの表示
   今度は、htmlのfont-sizeを特に設定していない（デフォルトのままの）サイトを訪れます。サイトはユーザーの設定を尊重し、「20px」を1remの基準とします。
   
3. 結果
   サイト全体の文字サイズや余白が、ユーザーの希望通りに1.25倍（20px / 16px）に拡大されます。ユーザーは自分が一番見やすい環境で、快適にサイトを閲覧することができます。
   

まとめ：誰のための選択か？

この比較から分かる通り、「10px」設定は開発者だけが楽になる一方、「16px」設定はユーザーと開発者の両方にとって良い結果をもたらします。

「でも、16px基準だと計算が面倒…」という問題は、Sass(SCSS)の関数や、エディタの拡張機能を使えば簡単に解決できます。

Sass(SCSS)の関数を使った解決例

// pxをremに変換する便利な関数
@function rem($pixels, $base: 16) {
  @return #{$pixels / $base}rem;
}

// 使いたい場所でpxの値を渡すだけ！
.title {
  font-size: rem(24); // → 1.5rem に自動で変換
}

Webサイトは、さまざまな環境の、さまざまな人が訪れる場所です。開発者の一時的な「楽さ」よりも、すべてのユーザーにとっての「使いやすさ」を優先することが、より良いWebサイト作りの第一歩です。

これからのWeb制作では、ぜひブラウザのデフォルトを尊重した「1rem = 16px」基準で、アクセシブルなコーディングを心がけてみてください！