CSS 相対単位”em”と”rem”の違いと使い分け

CSSでフォントサイズや余白を設定する際、emとremという単位をよく見かけます。
どちらも相対的な単位ですが、それぞれ異なる役割を持っています。

emとrem

まずは、emとremの定義を確認しましょう。

• em: 親要素のフォントサイズ基準で相対的にサイズを指定
• rem: ルート要素（html要素）のフォントサイズ基準で相対的にサイズを指定

参照するフォントサイズが、親要素なのか、ルート要素なのかが大きな違いです。

特徴とその使い分け

では、具体的にどのように使い分けるのかを見ていきます。

em:

• 文字サイズを調整したい場合に適している
• 親要素のフォントサイズが変化すると、子要素のフォントサイズも連動して変化する
• 段落構造を意識したデザインに有効

rem:

• 全体的なレイアウトを調整したい場合に適している
• ルート要素のフォントサイズが変化しても、子要素のフォントサイズは変化しない
• レスポンシブデザインに有効

emは親要素のフォントサイズに依存するため、階層構造を意識したデザインに有効です。
一方remは、ルート要素のフォントサイズが要素全体に影響することになります。
この特徴から、emとremを使い分ける場合、文字サイズはem、全体的なレイアウトはremを使うことが基本になります。

CSSでの使用例

最後に、具体的なCSSでの使用例を紹介していきます。
まずはemを用いた例です。p要素内の強調文字は、親要素であるp要素のフォントサイズ基準で1.5倍のサイズに設定されています。

/* p要素のフォントサイズを16pxに設定 */
        p {
          font-size: 16px;
        }
        
        /* p要素内の強調文字のフォントサイズを1.5emに設定 */
        p em {
          font-size: 1.5em; /* 24px */
        }

次にremを用いた例です。
body要素の余白とh1要素のフォントサイズを、ルート要素のフォントサイズ基準で設定しています。

/* ルート要素のフォントサイズを16pxに設定 */
        html {
          font-size: 16px;
        }
        
        /* body要素の余白を1remに設定 */
        body {
          margin: 1rem;
        }
        
        /* h1要素のフォントサイズを2remに設定 */
        h1 {
          font-size: 2rem;}

まとめ

emとremの定義と特徴、その使い分けがわかったでしょうか。
CSSではほかにも、px, rem, %,vh,vw等の単位が用いられます。
それぞれの役割を理解し、目的に合わせて使い分けることで、より意図したデザインを実現できます。