CSSで文字サイズを可変にする！emとremの使い方を完全ガイド

1. CSSの文字サイズ指定に欠かせない相対単位とは？

1. CSSの文字サイズ指定に欠かせない相対単位とは？

Webサイトで文字の大きさを指定する際、多くの初心者は「16px」や「20px」といった「px（ピクセル）」という単位を使います。pxは、パソコンの画面上の「点」を基準にした固定のサイズです。これを「絶対単位」と呼びます。しかし、最近のホームページ制作では、画面の大きさやブラウザの設定に合わせて柔軟に変化する「相対単位」を使うのが一般的です。

「相対単位」とは、何かの基準に対して「何倍にするか」を決める単位のことです。例えば、お父さんの身長を基準にして、子供の身長を「お父さんの0.8倍」と決めるようなイメージです。これを使うことで、基準となる文字サイズを変更するだけで、サイト全体の文字サイズをバランスよく一斉に変更できるようになります。その代表的な単位が、今回学習する「em（エム）」と「rem（レム）」です。

2. remを使ってルートを基準に文字を動かす

2. remを使ってルートを基準に文字を動かす

まず最初に覚えたいのが「rem（レム）」という単位です。これは「root em（ルート・エム）」の略です。「ルート」とは、Webページの一番根っこの部分、つまりブラウザそのものの設定やhtmlタグのことを指します。

ブラウザの標準的な文字サイズは通常「16px」に設定されています。このとき「1rem」は「16px」と同じ大きさになります。「2rem」ならその2倍の「32px」、「0.5rem」なら半分の「8px」です。remの素晴らしい点は、常に一番根っこのサイズだけを基準にするため、どこで使っても計算が狂いにくく、初心者の方でも扱いやすいという点にあります。パソコンの設定で文字を大きくしている人にも優しい、バリアフリーな設定が可能になります。

<style>
    html {
        font-size: 16px; /* これが基準（ルート）になります */
    }
    .text-large {
        font-size: 2rem; /* 16px × 2 = 32px */
    }
    .text-small {
        font-size: 0.8rem; /* 16px × 0.8 = 12.8px */
    }
</style>

<p class="text-large">これは大きな文字（2rem）です</p>
<p class="text-small">これは少し小さな文字（0.8rem）です</p>

3. emを使って親要素に連動させる方法

3. emを使って親要素に連動させる方法

次に紹介するのが「em（エム）」です。これは、その文字が入っている「親の要素」の文字サイズを基準にする単位です。remが「常に全体の根っこ」を基準にするのに対し、emは「すぐ上の階層」を基準にするという違いがあります。

例えば、ある見出し（親）の中に小さな注釈（子）を入れる場合、親の文字サイズを大きくすれば、emで指定した子も自動的に連動して大きくなります。パーツごとにまとまったサイズ調整をしたい場合に非常に便利です。ただし、入れ子構造（箱の中に箱が入っている状態）が深くなると、計算が掛け算のように重なっていくため、慣れるまでは少し注意が必要です。まずは「身近な親分に従う単位」だと覚えておきましょう。

<style>
    .parent-box {
        font-size: 20px; /* 親のサイズ */
        border: 1px solid #ccc;
        padding: 10px;
    }
    .child-text {
        font-size: 1.5em; /* 20px × 1.5 = 30px */
        color: blue;
    }
</style>

<div class="parent-box">
    親要素（20px）
    <p class="child-text">子要素（親の1.5倍の大きさ）</p>
</div>

4. レスポンシブ対応を楽にする「魔法の1行」

4. レスポンシブ対応を楽にする「魔法の1行」

メディアクエリを使って、スマホとパソコンで文字サイズを一気に切り替えたいとき、remの本領が発揮されます。htmlタグ（ルート）の文字サイズを、画面幅が狭いときは少し小さめに、広いときは大きめに設定するだけで、サイト内のすべてのrem指定が連動して変化します。

pxで一つひとつの場所を指定し直す必要はありません。根っこの数字を一つ変えるだけで、タイトルも本文もボタンの文字も、すべてが最適なバランスに自動調整されます。これが「可変テキストサイズ」の醍醐味です。パソコンをあまり触ったことがない方でも、この効率的な仕組みを一度体験すると、px指定には戻れなくなるほど便利ですよ。

<style>
    /* 基本はスマホ向け（少し小さめ） */
    html { font-size: 14px; }

    /* 画面が広くなったら（パソコン向け）大きくする */
    @media (min-width: 768px) {
        html { font-size: 18px; }
    }

    .responsive-title {
        font-size: 2rem; /* 画面幅によって 28px か 36px に自動で変わる */
        color: green;
    }
</style>

<h1 class="responsive-title">画面を広げると文字も大きくなるよ！</h1>

5. pxとremの計算を簡単にするテクニック

5. pxとremの計算を簡単にするテクニック

「16pxが基準だといちいち計算するのが面倒……」と感じるかもしれません。そこで、プロの現場でも使われる裏技があります。それは、htmlタグの文字サイズを「62.5%」に設定する方法です。

ブラウザの標準「16px」の62.5%は、ちょうど「10px」になります。こうすると、「1.6rem = 16px」「2.0rem = 20px」といった具合に、私たちが使い慣れた10進数で直感的にサイズを決められるようになります。計算が苦手な方でも、これなら簡単にデザインを調整できますね。ちょっとした工夫で、プログラミングの難易度はぐっと下げることができるのです。

6. 余白の指定にもemやremを活用しよう

6. 余白の指定にもemやremを活用しよう

文字サイズだけでなく、余白（マージンやパディング）にもemやremを使うのが上級者への第一歩です。文字の大きさを変えたときに、余白だけがpxで固定されていると、文字と枠線の間隔がアンバランスに見えてしまいます。

余白にemを使うと、「文字の大きさに合わせた余白」が作れます。大きな文字には大きな余白、小さな文字には小さな余白が自動で設定されるため、デザインの統一感が一気に増します。これを「コンポーネント設計」と呼びますが、今はまだ難しい言葉は覚えなくて大丈夫です。まずは「文字と余白はセットで動かすと綺麗」という感覚を大切にしてください。

<style>
    .flexible-button {
        display: inline-block;
        font-size: 1.5rem;
        padding: 0.5em 1em; /* 文字サイズに応じた余白 */
        background-color: #ff5722;
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }
</style>

<a href="#" class="flexible-button">連動するボタン</a>

7. アクセシビリティに配慮したサイト作り

7. アクセシビリティに配慮したサイト作り

相対単位を使う最大の理由は、実は「見る人への思いやり」にあります。高齢の方や目が疲れやすい方は、ブラウザの設定で文字サイズを大きくして閲覧しています。もし私たちがpxでガチガチにサイズを固定してしまうと、その人たちが設定を変えても文字が大きくならず、非常に不便な思いをさせてしまいます。

remを使って作られたサイトであれば、ユーザーの設定を尊重しつつ、レイアウトを保ったまま文字サイズが変わります。誰もが快適に情報を得られるサイトにすることを「アクセシビリティ」と言います。プログラミングの技術は、こうした優しさを形にするための道具でもあります。ぜひ、最初からremを使う癖をつけて、優しいWebサイト制作者を目指しましょう。

8. 実際にブラウザの設定を変えて確認してみよう

8. 実際にブラウザの設定を変えて確認してみよう

最後のアドバイスとして、自分で作ったページが正しく動いているか確認する方法をお伝えします。Google Chromeなどのブラウザの設定画面から「フォントサイズ」を「極大」や「極小」に変更してみてください。あなたの書いたコードがremやemで作られていれば、ページ全体の文字が設定通りに変化するはずです。

自分の書いたコードがユーザーの操作に反応して動く様子を見るのは、とても感動する体験です。最初は「0.1」の単位で迷うこともあるかもしれませんが、失敗を恐れずに色々な数値を試してみましょう。検証ツールを使ってリアルタイムに数字を書き換えるのも、理解を深める近道です。楽しみながら、自分だけの可変レイアウトを作り上げてください！

まとめ

まとめ

今回の記事では、Webデザインの基本となる「文字サイズの指定方法」について、絶対単位のpx（ピクセル）と、相対単位であるrem（レム）やem（エム）の違いを詳しく解説してきました。現代のホームページ制作において、スマートフォンやタブレット、デスクトップPCといった多様なデバイスに対応する「レスポンシブデザイン」は避けて通れません。その中で、文字サイズを固定せず、環境に合わせて柔軟に変化させる技術は、プロの現場でも必須のスキルとなっています。

特に「rem」は、htmlタグという「ルート（根っこ）」のサイズを基準にするため、サイト全体の統一感を保ちながら一斉にサイズ調整ができる非常に強力な単位です。一方で「em」は、親要素のサイズに連動するため、特定のパーツ内での比率を保ちたい場合に最適です。これらを適切に使い分けることで、コードの記述量を減らし、メンテナンス性の高い美しいWebサイトを構築することが可能になります。

また、SEO（検索エンジン最適化）の観点からも、アクセシビリティに配慮したサイト設計は非常に重要視されています。ユーザーがブラウザの設定で文字を大きくした場合でも、レイアウトが崩れずに正しく情報が伝わるサイトは、検索エンジンからも「ユーザーフレンドリーな良質なコンテンツ」として高く評価される傾向にあります。

最後に、今回学んだ「rem」と「em」を組み合わせた、実戦的なカード型レイアウトのサンプルプログラムをご紹介します。文字サイズだけでなく、余白（padding）や角丸（border-radius）にも相対単位を取り入れることで、全体のバランスが自動で整う様子を確認してみましょう。

<style>
	/* ルートの文字サイズを16pxに設定 */
	html {
		font-size: 16px;
	}

	/* 画面幅が広い場合の調整（レスポンシブ） */
	@media (min-width: 768px) {
		html {
			font-size: 18px;
		}
	}

	.summary-card {
		background-color: #f8f9fa;
		border: 2px solid #007bff;
		border-radius: 0.5rem; /* ルート基準の角丸 */
		padding: 1.5rem; /* ルート基準の余白 */
		max-width: 400px;
		margin: 20px auto;
		font-family: sans-serif;
	}

	.summary-title {
		font-size: 1.5rem; /* 16pxの1.5倍 = 24px */
		margin-bottom: 1rem;
		color: #007bff;
		font-weight: bold;
	}

	.summary-description {
		font-size: 1rem; /* 基準の16px */
		line-height: 1.6;
		color: #333;
	}

	.summary-badge {
		display: inline-block;
		background-color: #e2e3e5;
		padding: 0.2em 0.8em; /* 文字サイズに連動する余白 */
		font-size: 0.8em; /* 親の文字サイズの0.8倍 */
		border-radius: 1em;
		margin-top: 1rem;
		font-weight: bold;
	}
</style>

<div class="summary-card">
	<div class="summary-title">
		<i class="bi bi-check2-circle me-2"></i>学習のポイント
	</div>
	<p class="summary-description">
		相対単位を活用することで、ユーザーの閲覧環境に合わせた最適な表示が可能になります。アクセシビリティを高めることは、信頼されるサイト作りの第一歩です。
	</p>
	<div class="summary-badge">CSS基礎</div>
	<div class="summary-badge">レスポンシブ</div>
</div>