CSS の rem や em を使用したサイズ指定を理解する

2017-12-28

CSS の rem や em といった相対的なサイズ指定方法を理解すると、Web サイト全体のレイアウトの整合性を保ちやすくなります。

rem と em の違い

rem や em などのフォントサイズに比例する単位は、W3C の下記のページに詳しく説明されています。

CSS Values and Units Module Level 3 - 5.1.1. Font-relative lengths: the em, ex, ch, rem units

rem も em も小文字の m の幅にほぼ等しいサイズを表しますが、下記のように、どの要素のフォントサイズを基準にするかが異なります。

rem (root em): font size of the root element（ルート要素のフォントサイズ）
em: font size of the element（要素のフォントサイズ）

これだけでは分かりにくいので、それぞれの単位の意味を詳しく見てみましょう。

rem の意味

rem はルート要素のフォントサイズを基準にした単位です。例えば、下記のようなスタイルを考えてみます。

html { font-size: 100%; }
p    { font-size: 1rem; }
h2   { font-size: 1.5rem; }

ルートの html 要素でフォントサイズを 100% に設定しているため、ブラウザのデフォルトサイズ（通常は 16px = 12pt）が 1rem となります。つまり、p 要素は 1rem = 12pt、h2 要素は 1.5rem = 18pt になります。ただし、ユーザがブラウザ設定で表示フォントサイズを変更している場合は、それに応じて 1rem あたりの実際のサイズが変わってきます。いずれにしても、全ての要素のフォントサイズを rem を使って指定しておけば、ウェブサイト全体でフォントサイズの整合性を保ちやすくなるでしょう。

em の意味

単位 em の意味は、font-size プロパティに使用するか、それ以外のプロパティに使用するかで意味が異なってきます。

font-size プロパティの値の単位に em を使用すると、親要素の font-size を 1em とした相対サイズ でのフォントサイズ指定が可能です。例えば、下記のようにすると、p 要素のフォントサイズは、親要素の 1.5 倍のフォントサイズになります。

p {
  font-size: 1.5em;
}

font-size 以外のプロパティに em を使用すると、自分自身の font-size を 1em とした相対サイズ での指定になります。例えば、下記のようにすると、p 要素自身のフォントサイズの 1.5 倍のマージンが設定されます。

p {
  margin-top: 1.5em;
}

rem と em の使い道

rem と em は、上記のようにフォントサイズの指定に使用するだけでなく、レイアウト全般に活用することができます。例えば、次のようにすればメインコンテンツのカラム幅を、ルート要素の文字幅 50 字分 (50rem) に設定することができます。

main {
  max-width: 50rem;
}

次のようにすれば、現在の要素のフォントサイズで 1 文字分 (1em) のインデントを入れることができます。

p {
  text-indent: 1em;
}

次のようにすれば、各ヘッダの上部にヘッダレベルに応じたマージンを入れることができます。マージン設定の記述は共通ですが、単位に em を使用することで、h2 のマージンの方が h3 のマージンよりも大きくなります（もちろん、h2 の font-size の方が h3 のものより大きいことを前提としています）。

* + h2, * + h3 {
  margin-top: 1.5em;
}

大まかな方針としては、rem はサイト全体の各要素の配置、em は要素内でのインデントやマージン設定などに使用すると考えるとよいでしょう。

2017-12-28