CSS3のremとemの違いについて

css

2023.03.14

CSS3では、フォントサイズの指定に「rem」と「em」という単位が使えます。

これらの単位は、どちらも相対的な値であり、親要素のフォントサイズに対する相対値で指定されます。以下、remとemの違いと使い分け方について解説します。

remとは？
emとは？
使い分け
コード例
remのサポート状況
結論

remとは？

remとは「root em」という意味で、ルート要素であるhtml要素のフォントサイズを基準とする単位です。

つまり、html要素のフォントサイズに対する相対値で指定されます。

例えば、html要素のフォントサイズが16pxであれば、1remは16pxに相当します。

emとは？

emは、指定された要素のフォントサイズに対する相対値で指定されます。

つまり、親要素のフォントサイズに対する相対値で指定されます。（この点は％と同じです。）

例えば、親要素のフォントサイズが16pxであれば、1emは16pxに相当します。

使い分け

remはルート要素のフォントサイズに対して相対的な値で指定されるため、全体のレイアウトに対して一括でフォントサイズを変更する場合に適しています。

一方、emは親要素のフォントサイズに対して相対的な値で指定されるため、テキストの大きさや行間など、親要素に依存する値を指定する場合に適しています。また、親要素のフォントサイズを変更することで、簡単にまとまった変更ができるため、柔軟なレイアウトを実現することができます。

コード例

/* remを使用したフォントサイズ指定 */
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32pxに相当 */
}

p {
  font-size: 1.2rem; /* 19.2pxに相当 */
}

/* emを使用したフォントサイズ指定 */
body {
  font-size: 16px;
}

.container {
  font-size: 1.2em; /* 親要素(body)のfont-sizeに対して1.2倍のサイズ */
}

.box {
  font-size: 0.8em; /* 親要素(container)のfont-sizeに対して0.8倍のサイズ */
}