CSS のレイアウト設計で使われる相対的な単位として、rem と em があります。これらは要素のフォントサイズや幅、高さなどを相対的に指定するための便利なツールですが、どちらを使うべきか迷うことがよくあります。本記事では、rem と em の違いと、それぞれの使い分けについて解説します。
emとは？
em は、親要素のフォントサイズを基準とした相対単位です。親要素のフォントサイズが変更されると、それに従って em で指定された要素のサイズも変わります。
例:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 親の 16px × 1.5 = 24px */
}
この場合、.child のフォントサイズは親要素のフォントサイズが基準となるため、24px になります。em の特徴は、ネストされた要素が親要素の影響を受ける点にあります。
remとは？
rem は、ルート要素（html）のフォントサイズを基準とした相対単位です。通常、ブラウザのデフォルトのフォントサイズは 16px なので、特に指定がなければ 1rem は 16px に相当します。
例:
html {
font-size: 16px;
}
.child {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
}
rem の大きな利点は、親要素に依存せず、一貫したサイズを保てる点です。これにより、ページ全体のデザインやフォントサイズを統一したい場合に役立ちます。
em と rem の違い
em: 親要素のフォントサイズを基準にしているため、親要素が異なればサイズも変わります。rem: 常にルート要素（html）のフォントサイズを基準にしているため、ページ全体で一貫したサイズが得られます。
違いの例
html {
font-size: 16px;
}
.parent {
font-size: 20px;
}
.child-em {
font-size: 2em; /* 20px × 2 = 40px */
}
.child-rem {
font-size: 2rem; /* 16px × 2 = 32px */
}
この例では、child-em は 40px になり、child-rem は 32px になります。em は親要素の影響を受けるため、サイズが異なります。
使い分けのポイント
1. 一貫したサイズを保ちたい場合は rem を使う
レスポンシブデザインや、サイト全体で統一されたフォントサイズを維持したい場合は、rem を使うのが推奨されます。ルート要素のフォントサイズを基準にしているため、ページ全体のバランスが崩れにくいです。
2. コンテキストに応じて柔軟にサイズを変えたい場合は em を使う
特定の親要素内で相対的にサイズを変えたい場合は、em が便利です。例えば、カードコンポーネントやボタンのサイズが親要素に応じて拡大・縮小されるようなデザインを実現するのに役立ちます。
3. 入れ子が深くなるときは em の注意が必要
em は親要素のサイズに依存するため、要素が入れ子になりすぎると、意図せずサイズが大きくなったり小さくなったりすることがあります。そのため、入れ子が深いデザインには rem の方が扱いやすいことが多いです。
結論：推奨されるのはどっち？
一貫性を重視する場合は rem を推奨 します。特にフォントサイズや幅、高さを全体的に管理したい場合には、rem が適しており、予期しないサイズの変更を避けられます。一方で、特定のコンポーネントごとに柔軟にサイズを変更したい場合には em を使うのが良いでしょう。
