CSS でボタンやカードなどのコンポーネントを設計する際、文字サイズを変更した途端に余白とのバランスが崩れたり、テキストが枠からはみ出したりすることがあります。
このような表示崩れは、デザインの見た目だけでなく、保守性やメンテナンス性にも影響します。
こうした問題を防ぎ、文字サイズに応じてコンポーネント全体を自然な比率で拡大・縮小しやすくするのが、CSS の相対単位「em（エム）」です。em は文字サイズを指定するだけでなく、padding や margin などの余白、width・height、border-radius などにも利用でき、フォントサイズを基準に各サイズを連動させられます。
ただし、em は指定する CSSプロパティ によって計算の基準が異なるため、その仕組みを理解せずに使うと、意図しないサイズになってしまうこともあります。
ここでは、em を使った崩れにくいデザイン設計をテーマに、文字サイズと余白・幅が連動する仕組みや、em を使うメリットを解説するとともに、font-size で注意すべきポイントやネストによる影響、すべてを em にする必要がない理由についても紹介します。
なお、em の基本的な意味や計算方法、font-size・padding・margin・width などへの指定方法については、「CSSの単位emとは？意味･正しい使い方、フォントサイズを基準に余白や幅も変化する仕組みを解説」で詳しく解説しています。
まだご覧になっていない方は、先にそちらを読むことで、本記事の内容をより理解しやすくなります。
emを使うことでデザインが崩れにくくなる理由
文字サイズが変わっても余白との比率を保てる
em を使用する大きなメリットは、文字サイズを基準に余白や幅なども連動するため、デザイン全体の比率を保ちやすいことです。
例えば、Webサイトでよく使われる以下のようなコンポーネントを、すべて px で固定して作成したとします。
・ボタン
・バッジ（「NEW」や「SALE」など）
・タグ
・ラベル
この状態で文字サイズだけを大きくすると、文字がボタンやバッジの枠からはみ出したり、余白とのバランスが悪くなって窮屈な印象になったりすることがあります。
一方、余白や幅を em で指定しておけば、文字サイズの変更に合わせて各サイズも自動的に再計算されます。
そのため、文字と余白の比率が維持され、デザイン全体のバランスを保ちやすくなります。
コンポーネント全体を拡大・縮小しやすい
em を使うと、ボタンやバッジなどのコンポーネントを、内部の比率を保ったまま拡大・縮小しやすくなります。
例えば、以下のようなボタンを作成します。
HTML
<button class="btn-co">購入する</button>
<button class="btn-co btn-large">購入する</button>CSS
.btn-co {
font-size: 14px;
margin: 1em;
padding: 0.5em 1em;
width: 10em;
border-radius: 0.5em;
background: #333;
color: #fff;
border: none;
}
.btn-large {
font-size: 24px;
}ブラウザでの表示
通常サイズのボタンでは、フォントサイズが 14px なので、
・margin:1em → 14px
・padding:0.5em → 7px
・padding:1em → 14px
・width:10em → 140px
・border-radius:0.5em → 7px
として計算されます。
一方、大きなボタンでは font-size だけを 24px に変更しています。
すると、
・margin:1em → 24px
・padding:0.5em → 12px
・padding:1em → 24px
・width:10em → 240px
・border-radius:0.5em → 12px
へ自動的に変化します。
つまり、変更したのは文字サイズだけですが、
↓
文字サイズが拡大
↓
margin・padding・width・border-radiusも比例して拡大
↓
ボタン全体が同じ比率のまま大きくなる
という動きになります。
実際の画面では、通常サイズのボタンと大サイズのボタンを並べると、文字だけでなく余白や角丸も同じ割合で変化していることが確認できます。
もしこれらをすべてpxで指定していた場合、大きなボタンを作るたびに、
・文字サイズ
・上下左右の余白
・横幅
・角丸
をそれぞれ調整する必要があります。
em を利用すれば、コンポーネントの基準となる font-size を変更するだけで、内部のサイズが連動します。
そのため、サイズ違いのボタンやカードを効率よく作成でき、デザインの一貫性も保ちやすくなります。
ブラウザの文字サイズ変更にも対応しやすく、レスポンシブ設計とも組み合わせやすい
em は、ユーザーが文字サイズを変更した場合でも、文字と周囲の余白やサイズのバランスを保ちやすいというメリットがあります。
Webブラウザ には、ユーザーが読みやすさを調整するために文字サイズを拡大する機能があります。
また、スマートフォンやタブレットでは、OS側 の設定で文字を大きく表示している場合もあります。
このとき、余白やボタンサイズをすべて px で固定していると、
↓
文字だけが拡大
↓
余白やボタンサイズは変わらない
↓
文字が窮屈になる・要素内のバランスが崩れる
といった問題が発生することがあります。
一方、padding や border-radius などを em で指定しておけば、文字サイズの変更に合わせて、それらの値も自動的に再計算されます。
そのため、ボタンやバッジなどのコンポーネントでは、文字サイズが変化しても余白や角丸との比率を維持しやすく、さまざまな閲覧環境で使いやすいデザインを保てます。
ただし、em は画面幅そのものに合わせて要素を縮小する単位ではありません。
例えば、スマートフォンで文字サイズを大きくした場合、em で指定したボタンやカードも同じように拡大するため、画面幅によっては横幅が足りず、要素がはみ出す可能性があります。
そのため、レスポンシブデザインでは、em によるサイズ連動に加えて、
・max-widthで最大サイズを制限する
・flexやgridでレイアウトを調整する
・メディアクエリで画面幅ごとにサイズを変更する
といった方法を組み合わせることが重要です。
em は「どの画面サイズでも自動的に収まる単位」ではありません。
フォントサイズを基準に、コンポーネント内部の余白や幅、角丸などを連動させ、デザインの比率を維持しやすくする単位です。
レスポンシブ対応では、max-width や Flexbox、Grid、メディアクエリなどと組み合わせて活用することで、そのメリットを最大限に発揮できます。
emを使う際の注意点
font-sizeは親要素を基準に計算されるため、ネストに注意
em を使用する際に特に注意したいのが、font-size に指定した場合の計算方法です。
font-size の値に em を指定すると、親要素のフォントサイズを基準に計算されます。
例えば、親要素のフォントサイズが 16px の場合、
p {
font-size: 2em;
}と指定すると、以下のように計算されます。
↓
32px
このように、font-size の em は「自分自身のサイズ」ではなく、「親要素のサイズ」を基準に決まる点が重要です。
そのため、em を指定した要素が何重にも入れ子になる「ネスト（入れ子）」構造では、階層が深くなるほど計算が複雑になります。
例えば、リストの中にさらにリストが入るような以下の HTML構造 を考えてみます。
HTML
<ul class="parent-list">
<li>親リストの項目（1層目）
<ul class="child-list">
<li>子リストの項目（2層目）
<ul class="grandchild-list">
<li>孫リストの項目（3層目）</li>
</ul>
</li>
</ul>
</li>
</ul>すべての ul に対して、文字サイズを少し大きくする目的で以下のCSSを指定したとします。
CSS
ul {
font-size: 1.2em;
}この場合、「すべてのリストが16pxの1.2倍になる」と考えてしまいがちですが、実際には下記のように各階層の親要素を基準に計算されます。
【1層目】親リスト（ul）
16px × 1.2
↓
19.2px
【2層目】子リスト（ul）
19.2px × 1.2
↓
23.04px
【3層目】孫リスト（ul）
23.04px × 1.2
↓
27.65px
このように、1階層ごとに計算されたフォントサイズが次の階層の基準になります。
そのため、ネストが深くなるほど文字サイズが意図せず大きくなり、デザインが崩れる原因になることがあります。
逆に、0.8em のような1未満の値を指定した場合は、階層が深くなるほど文字が小さくなってしまいます。
このような計算の複雑さが、em を font-size に使用する際の注意点です。
ただし、em 自体が使いにくい単位というわけではありません。
ボタンやバッジなどのコンポーネントでは、文字サイズに合わせて余白や幅を連動させることで大きなメリットがあります。
重要なのは、親要素の影響を受ける場所では計算の仕組みを理解して使い、文字サイズと連動させたい部分では em を活用することです。
すべてをemにする必要はない
ネストによってサイズ計算が複雑になるのを防ぐためには、「すべての単位を無理に em にしようとしないこと」です。
em は適材適所で使うからこそ輝く単位であり、用途に応じて他の単位と組み合わせるのが現代の Web制作 のベストプラクティスです。
・emが向いている場所
ボタンやバッジ、カード型レイアウトの「余白（padding/margin）」や「角丸（border-radius）」
文字数に応じて幅を変えたいコンポーネントの「横幅（width）」
・emを避けた方がいい場所
何重にも重なる可能性がある複雑なレイアウトの「フォントサイズ（font-size）」
グローバルナビゲーションやサイドバーなど、サイト全体でサイズを固定したい要素
文字サイズに関しては、親要素の影響を受けずにいつでもサイト全体の根本（ルート）を基準にできる rem（レム） という単位を使うのが現在の主流です。
また、線画（border）の太さなどは、どんなときも固定の px で指定した方が綺麗なケースが多々あります。
「文字と連動して動かしたい部分だけをemにする」という、一歩引いた視点での使い分けが重要なポイントです。
