【初心者向け】css em単位の使い方からpx, rem, %の違いと使い方を徹底比較！

※本ページはプロモーションが含まれています。

本記事は、「文字の大きさをどのようにCSSで指定したらいいか迷うことがあるなぁ…」と思いつつ

UIHACK 編集長

・「em」と「px」の違いは？どちらを選べばいいのか迷ってる人
・レスポンシブデザインを実装する時に結局どのフォントサイズを選べばいいのか迷う人
・絶対的・相対的ってそもそも何だっけとふと思う人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「emをどのように使うか」を「後半」では「em・px・rem・%などのよく使う単位の特徴」や「emとremの比較」を詳しく解説します。

プログラミング初心者の方でも、読みやすい内容なので、少しずつ試してみて楽しく学んでくださいね。

それでは、ご一読ください！

CSSのem単位とは？フォントサイズ指定の基本を解説
1. em単位の基本
2. em単位の使い方
CSSで使う単位の種類と特徴：em・px・rem・%を理解しよう
emとremの比較：どちらを使うべきか論争
FAQフォントサイズについてよくあるご質問
em単位とはの結論とまとめ

CSSのem単位とは？フォントサイズ指定の基本を解説

ウェブデザインやフロントエンド開発において、正しいフォントサイズを指定することは重要です。

その中でも「em」単位は、テキストやコンポーネントのフォントサイズを相対的に指定する方法を提供します。この記事では、「em」単位の基本的な仕組みと使い方について詳しく解説します。

em単位の基本

「em」（emphsisの略）は、要素のフォントサイズを親要素に対する倍率で指定する相対的な単位です。

例えば、親要素のフォントサイズが16pxであれば、1emは16pxとなります。もし親要素のフォントサイズが20pxであれば、1emは20pxとなります。

この相対的な性質により、親要素のフォントサイズに比例して子要素のフォントサイズも変化するため、レスポンシブデザインに適しています。また、ユーザーがブラウザの文字サイズを変更した場合にも、フォントサイズが適切に調整されるという利点があります。

em単位の使い方

em単位は、テキストやコンポーネントのフォントサイズ指定に使用されます。以下は基本的な使い方の例です。

/* 親要素のフォントサイズが16pxの場合 */
.parent {
  font-size: 16px;
}

/* 子要素のフォントサイズを1.5倍に設定 */
.child {
  font-size: 1.5em; /* 1emは16px × 1.5 = 24px */
}

CSS

【実行結果】基本的な3分割の方法

プチ解説

この例では、子要素のフォントサイズが親要素のフォントサイズに対して1.5倍に設定されています。

これにより、親要素のフォントサイズが変更された際に自動的に子要素のフォントサイズも調整されます。

CSSのem単位とは？フォントサイズ指定の基本を解説のまとめ

ウェブデザインやフロントエンド開発で、正しいフォントサイズ指定は重要。特に「em」単位は、相対的にフォントサイズを指定するためのツール。記事では、「em」単位の基本と使い方を詳しく解説。1emは親要素のフォントサイズに対する倍率であり、子要素のフォントサイズも連動。レスポンシブデザインや一貫性の保持に役立つ。フォントサイズを自在に調整して、洗練されたウェブデザインを実現しよう。

目次に戻る

2023年8月5日画面からはみ出る!?CSS単位の奥深さを解説！vw、vh、vmin、vmaxの違いと使い方

CSSで使う単位の種類と特徴：em・px・rem・%を理解しよう

ウェブデザインにおいて、正確なサイズ指定はデザインの基盤となります。フォントサイズや要素の大きさを指定する際に使われる単位にはいくつか種類があります。

ここでは、代表的な単位である「em」、「px」、「rem」、「%」について詳しく解説します。

em（相対的な単位）

「em」は親要素のフォントサイズに対する倍率で指定される相対的な単位です。例えば、要素のフォントサイズを1.5emにすると、親要素のフォントサイズの1.5倍になります。レスポンシブデザインに適しており、テキストやコンポーネントの一貫性を保つために利用されます。

px（絶対的な単位）

「px」はピクセル単位で指定される絶対的な単位です。具体的な値を指定するため、要素の大きさやテキストの見え方を正確に制御できます。ただし、ブラウザのテキストサイズ設定に影響されることがあるため、注意が必要です。

rem（ルートのフォントサイズに対する倍率）

「rem」はルート要素（通常は要素）のフォントサイズに対する倍率で指定される相対的な単位です。親要素の影響を受けず、一貫性のあるデザインを実現できます。主にモダンなレスポンシブデザインで使用されます。

%（パーセント単位）

「%」は親要素の特定のプロパティに対する割合として指定される相対的な単位です。例えば、親要素の幅に対する割合として要素の幅を指定することができます。要素が親要素に対してどれだけの割合を占めるかを柔軟に調整できます。

【実行結果】CSSで使う単位の種類

プチ解説

このHTMLとCSSコードは、提供した文章に記述されている各単位の特徴に基づいてスタイルを適用しています。

各要素のフォントサイズが「em」、「px」、「rem」、「%」に従って異なることが確認できるでしょう。必要に応じて、ファイルの保存場所やファイル名を適切に調整してください。

CSSで使う単位の種類と特徴：em・px・rem・%のまとめ

ウェブデザインにおいて、正確なサイズ指定は基盤です。

フォントサイズや要素の大きさを指定する際に使用する単位は「em」「px」「rem」「%」があります。

この中で

「em」は親要素のフォントサイズに対する倍率で相対的な単位。レスポンシブデザインに適し、一貫性を保つ役割。

「px」はピクセル単位で絶対的。

「rem」はルート要素の倍率で相対的で、モダンなレスポンシブデザインに使用。

「%」は親要素の特定プロパティに対する割合。

適材適所で単位を使い分けて、効率的に実装しましょう。

目次に戻る

emとremの比較：どちらを使うべきか論争

ウェブデザインで、文字や要素の大きさを指定する時に「1em」と「rem」という単位がありますが、どちらを選ぶか分かりにくいことがあります。それぞれの特徴を分かりやすく説明します。

emの特徴

「1em」は、その要素が入っている箱（親要素）の大きさに合わせて、文字や要素の大きさを決める方法です。親要素が大きくなると、中の文字も大きくなります。画面が小さくなっても、文字が自動的に調整されて見やすくなります。

remの特徴

「rem」は、一番外側の箱（通常、画面全体を意味する箱）の大きさに合わせて、文字や要素の大きさを決める方法です。他の箱の影響を受けず、どの場所でも同じ大きさになります。画面サイズやテキストの設定にも影響されません。

結局「em」と「rem」のどちらを選ぶべきか？

状況によって違います。一つ一つの要素を個別に調整したいなら「1em」が、どの場所でも同じ見た目を保ちたいなら「rem」が良いです。必要に応じて、両方を組み合わせて使うこともあります。使う単位は、デザインの目標や状況によって選びましょう。

主な内容を表のまとめました

特徴	em	rem
定義	親要素のフォントサイズに対する倍率で指定	ルート要素（通常は要素）のフォントサイズに対する倍率で指定
相対性	親要素に対して相対的	ルート要素に対して相対的
一貫性	親要素ごとに異なる大きさ	どの場所でも同じ大きさ
レスポンシブデザイン	適しており、親要素に合わせて自動調整	適しており、一貫性を保ちつつ調整
テキストサイズ設定	影響を受ける可能性あり	影響を受けず、安定
例	font-size: 1.5em;	font-size: 1.5rem;