【簡単】CSSの単位「rem」とは？比較を用いてわかりやすく解説

（最終更新日：2023年9月）

✔以下のような方へ向けて書かれた記事となります

「CSSの単位 “rem” の概念がよく分からない」
「remの使い方や計算方法を知りたい」
「実際のサイトでremをどのように活用すべきかを学びたい」

✔当記事を通じてお伝えすること

• CSS “rem” 単位の基本概念
• remの使い方と計算方法
• 具体的なremの活用例

当記事では、CSSの単位「rem」の基本的な理解から、その効果的な使い方や計算方法、さらに実際のサイトでの活用例まで詳細に解説しています。

ぜひ最後までお読みいただき、”rem” の活用法を身につけましょう。

REM（レム）の基本概念

こちらでは、「REM」の基本概念についてお伝えしていきます。

「REM」について理解することで、より柔軟で効率的なウェブデザインが可能になるでしょう。

• REMの定義と特徴
• 他の単位との比較

REMの定義と特徴

「REM」はCSSで使用される相対単位のひとつで、「Root EM」の略です。

この単位の特徴は、ルート要素（HTML要素）のフォントサイズに対する相対的な大きさを示すことにあります。

ルート要素のフォントサイズが変わると、それに応じてREMで指定された要素のサイズも自動的に調整されるのです。

ウェブページ全体のスケール変更が容易になるため、レスポンシブデザインにおいて有用な単位と言えます。

ほかの単位との比較

CSSには、ほかにもさまざまな単位が存在します。

• PX（ピクセル）：画素数を示す絶対単位
• %（パーセント）：親要素に対する相対的な比率
• EM（エム）：直接の親要素のフォントサイズに対する相対的な大きさ

これらはそれぞれ異なる特性を持ち、用途によって使い分けることが求められます。

「REM」はこれらと異なり、ルート要素に対する相対的な大きさを示すため、異なる要素間で一貫したサイズ指定が可能です。

REMの使い方とポイント

次に、「REM」の使い方とその活用上のポイントについて詳しく説明します。

これらを理解することで、より実践的なデザインを実現するための知識を深められます。

• 文字サイズ指定の方法
• REMの活用メリット
• 文字サイズ指定のポイント

文字サイズ指定の方法

REMを用いて、文字サイズを指定する方法は非常にシンプルです。

例えば、ルート要素のフォントサイズが16px設定されている場合、1remはこの16pxに相当します。

したがって、文字サイズを32pxにしたい場合は、2remと指定します。

html {
  font-size: 16px;
}

p {
  font-size: 2rem;  /* 32px */
}

REMの活用メリット

REMの最大のメリットは、ルート要素のフォントサイズを変更するだけで、サイト全体のスケーリングが可能であること。

REMにより、全要素サイズが、ルート要素に対して相対的になっているからです。

これはレスポンシブデザインや、ユーザーの視力に合わせた文字サイズの調整など、さまざまなシーンで有用です。

文字サイズ指定のポイント

REMを用いて文字サイズを指定するポイントは、「ルート要素のフォントサイズ」が基準であることを忘れない、という点です。

ルート要素のフォントサイズは通常、使用しているブラウザのデフォルトフォントサイズ（多くの場合は16px）が適用されます。

ただしこの値は、ユーザーがブラウザの設定で変更可能であるため、その点も考慮する必要があります。

REMとほかの単位の違い

REMの特性を理解するためには、ほかのCSSの単位との比較も必要です。

それぞれの単位がどのような特性を持ち、どのような場合に適しているのかを理解することで、より適切な単位を選択できます。

• PX（ピクセル）との違い
• %（パーセント）との違い
• EM（エム）との比較

PX（ピクセル）との違い

PXを使うと、非常に直感的にサイズを指定可能です。

PXは、CSSの単位の中で最も基本的なもので、ディスプレイ上の一点を指します。

ただしPXは、絶対的なサイズを指定するため、異なるディスプレイや設定で見た場合に同じ見え方を保証することは難しいです。

一方REMは、ルート要素に対する相対的なサイズを指定するため、より一貫したデザインを実現することが可能です。

%（パーセント）との違い

%は、親要素に対する相対的なサイズを指定します。

レイアウトの柔軟性は高いですが、親要素のサイズに依存します。

予期せぬレイアウトの崩れを引き起こす可能性があるのです。

一方REMは、ルート要素に対する相対的なサイズを指定するため、レイアウトの安定性が高まります。

EM（エム）との比較

EMも親要素に対する相対的なサイズを指定しますが、指定された要素の直接の親のフォントサイズに基づきます。

EMを使うとネストされた要素のレイアウトが複雑になりやすいです。

一方REMは、ルート要素のフォントサイズに基づくため、サイト全体で一貫したサイズ感を保てます。

REMの活用シーン

REM単位はさまざまなシーンで役立つことがあります。

とくにレスポンシブデザインやアクセシビリティの向上に関しては、REM単位の利用が有効です。

• レスポンシブデザイン
• アクセシビリティ向上

レスポンシブデザイン

レスポンシブデザインでは、異なるデバイスサイズに対応するため、要素のサイズを柔軟に調整することが求められます。

ここでREMを使用すると、ルート要素のフォントサイズを調整するだけで、全体のレイアウトを一度に調整できるのです。

デバイスごとのメディアクエリ内でルート要素のサイズを変更するだけで、サイト全体のスケーリングを調整できます。

アクセシビリティ向上

アクセシビリティ（利用しやすさ）を向上させるためには、ユーザーが自分に合った表示サイズを選択できることが重要です。

一部のユーザーは、視覚的な理由や好みからブラウザのデフォルトフォントサイズを変更しています。

REM単位を使用すると、このようなユーザーの設定を尊重し、それに基づいて全体のレイアウトを自動的な調整が可能です。

より多くのユーザーにとって使いやすいウェブサイトを作成することが可能となります。

REMのサポート状況

ほとんどの現代ブラウザはREM単位をサポートしていますが、古いブラウザではまだサポートされていない場合があります。

REM単位は、Internet Explorer 9以降、Firefox、Chrome、Safariなどの最新の主要なブラウザでサポートされています。

ただし、古いブラウザ（特にInternet Explorer 8以下）をサポートする必要がある場合は、代替のスタイリング方法を用意することを検討してください。

REMを活用する際のフォントサイズ設定

REMの利用における次の要点は、適切なフォントサイズ設定です。

ここでは、フォントサイズの目安、ルート要素のフォントサイズ指定、計算しやすいベースフォントサイズの設定について説明します。

• フォントサイズの目安
• ルート要素 (html) のフォントサイズ指定
• 計算しやすいベースフォントサイズの設定

フォントサイズの目安

REMは、ルート要素のフォントサイズに依存します。

したがって適切なフォントサイズを設定することは、ウェブサイトの視認性を確保する上で非常に重要です。

一般的に、基本的なフォントサイズとしては、1rem = 16pxが推奨されています。

多くのブラウザでデフォルトのフォントサイズが16pxに設定されているためです。

ルート要素 (html) のフォントサイズ指定

ルート要素（html要素）のフォントサイズは、ウェブサイト全体の基準となるため、慎重に設定しましょう。

ルート要素のフォントサイズを設定することで、全体のスケーリングが容易になります。

たとえば、ルート要素のフォントサイズを10pxに設定すると、1rem = 10pxとなり、計算が容易です。

計算しやすいベースフォントサイズの設定

より計算が容易なレスポンシブデザインを目指す場合、ベースとなるフォントサイズを10pxに設定するのもひとつのアイディアです。

REM単位を利用したスタイリングの計算が容易になります。

1.6remは16px、2.5remは25pxと直感的に理解できるでしょう。

ただし、ユーザーのアクセシビリティを損なわないようにするためには、ブラウザのデフォルトのフォントサイズ設定を無視しないことが重要です。

まとめ

以上がREM単位の基本的な使用方法とその活用ポイントになります。

REMは、レスポンシブデザインやアクセシビリティに配慮したウェブデザインにおいて非常に有用な単位です。

その特性を理解し、適切な設定と活用を行うことで、多様なデバイスやユーザーに対応したウェブサイトを制作することが可能になります。

今後は実際のウェブサイトやプロジェクトでREMを活用してみてください。

初めての試みであれば、まずは文字サイズの指定から始めてみると良いでしょう。

ほかのCSS単位（px、em、%など）との組み合わせも試すのがおすすめです。