CSSで文字サイズを可変にする！emとremの使い方を完全ガイド
生徒
「文字の大きさを決めるとき、いつもpx（ピクセル）を使っているのですが、スマホで見るとバランスが悪く感じることがあります。もっと良い方法はありますか？」
先生
「それは良いところに気づきましたね。pxは『絶対的なサイズ』なので、どんな画面でも同じ大きさになってしまいます。レスポンシブなサイトを作るなら、emやremといった『相対的なサイズ』を使うのがおすすめですよ。」
生徒
「エム……？レム……？難しい単語が出てきましたが、それを使うと何が変わるんですか？」
先生
「これらを使うと、基準となる文字サイズに合わせて、他の文字も自動で伸び縮みするようになるんです。まるで魔法のような仕組みを、詳しく解説していきますね！」
1. CSSの文字サイズ指定に欠かせない相対単位とは？
Webサイトで文字の大きさを指定する際、多くの初心者は「16px」や「20px」といった「px（ピクセル）」という単位を使います。pxは、パソコンの画面上の「点」を基準にした固定のサイズです。これを「絶対単位」と呼びます。しかし、最近のホームページ制作では、画面の大きさやブラウザの設定に合わせて柔軟に変化する「相対単位」を使うのが一般的です。
「相対単位」とは、何かの基準に対して「何倍にするか」を決める単位のことです。例えば、お父さんの身長を基準にして、子供の身長を「お父さんの0.8倍」と決めるようなイメージです。これを使うことで、基準となる文字サイズを変更するだけで、サイト全体の文字サイズをバランスよく一斉に変更できるようになります。その代表的な単位が、今回学習する「em（エム）」と「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を使って親要素に連動させる方法
次に紹介するのが「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行」
メディアクエリを使って、スマホとパソコンで文字サイズを一気に切り替えたいとき、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の計算を簡単にするテクニック
「16pxが基準だといちいち計算するのが面倒……」と感じるかもしれません。そこで、プロの現場でも使われる裏技があります。それは、htmlタグの文字サイズを「62.5%」に設定する方法です。
ブラウザの標準「16px」の62.5%は、ちょうど「10px」になります。こうすると、「1.6rem = 16px」「2.0rem = 20px」といった具合に、私たちが使い慣れた10進数で直感的にサイズを決められるようになります。計算が苦手な方でも、これなら簡単にデザインを調整できますね。ちょっとした工夫で、プログラミングの難易度はぐっと下げることができるのです。
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. アクセシビリティに配慮したサイト作り
相対単位を使う最大の理由は、実は「見る人への思いやり」にあります。高齢の方や目が疲れやすい方は、ブラウザの設定で文字サイズを大きくして閲覧しています。もし私たちがpxでガチガチにサイズを固定してしまうと、その人たちが設定を変えても文字が大きくならず、非常に不便な思いをさせてしまいます。
remを使って作られたサイトであれば、ユーザーの設定を尊重しつつ、レイアウトを保ったまま文字サイズが変わります。誰もが快適に情報を得られるサイトにすることを「アクセシビリティ」と言います。プログラミングの技術は、こうした優しさを形にするための道具でもあります。ぜひ、最初からremを使う癖をつけて、優しいWebサイト制作者を目指しましょう。
8. 実際にブラウザの設定を変えて確認してみよう
最後のアドバイスとして、自分で作ったページが正しく動いているか確認する方法をお伝えします。Google Chromeなどのブラウザの設定画面から「フォントサイズ」を「極大」や「極小」に変更してみてください。あなたの書いたコードがremやemで作られていれば、ページ全体の文字が設定通りに変化するはずです。
自分の書いたコードがユーザーの操作に反応して動く様子を見るのは、とても感動する体験です。最初は「0.1」の単位で迷うこともあるかもしれませんが、失敗を恐れずに色々な数値を試してみましょう。検証ツールを使ってリアルタイムに数字を書き換えるのも、理解を深める近道です。楽しみながら、自分だけの可変レイアウトを作り上げてください！
