開発

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

みんなの簡素を教えてね!
  • すごい! (0)
  • やってみようと思う! (0)

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等の単位が用いられます。
それぞれの役割を理解し、目的に合わせて使い分けることで、より意図したデザインを実現できます。

アバター画像

インターン実習生

こんにちは!合同会社グローワークスのインターン生です。ITとデザインが大好きで、皆さんと一緒に創造的なプロジェクトを進めていくことにワクワクしています!