3分で簡単にわかる！CSSのremとemの違いとは？px・%との違いもITオタクの会社員ライターがわかりやすく解説

ライター／ちょび

ビジネス書が大好きな読書家Webライター。FPの資格やAWSの資格を取得し、金融知識やITについての情報を発信している。

remとemの違いとは？

image by iStockphoto

CSSでフォントサイズや要素のサイズを指定する際、よく使われる単位に「rem」と「em」があります。これらの単位にはどのような違いがあるのでしょうか？

5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

3分で簡単にわかる！CSSとSCSSの違いとは？SCSSの書き方や文法もITオタクの会社員ライターが詳しく解説！

CSSスタイルシートの「id」と「class」の違いは？使い分けや記述方法・優先順位も元企業ホームページ担当がわかりやすく解説

簡単でわかりやすい！CSSの「.（ドット）」と「#（シャープ）」の違いとは？Web制作の基本を現役システムエンジニアが詳しく解説

rem：root要素に依存

「rem」とは、root要素（HTML要素）のフォントサイズに対する相対値です。例えば、root要素のフォントサイズが16pxの場合1remは16pxとなります。ただし、root要素のフォントサイズはブラウザやユーザーの設定によって変わることがあるため、その場合は1remの値も変化するので注意しましょう。

「rem」は、レスポンシブデザインにおいて画面サイズに合わせて要素のサイズを調整する場合に便利です。root要素のフォントサイズを変えることで、全体のサイズを一括して変更できるため、コード量も減らすことができます。

em：親要素に依存

「em」とは、親要素のフォントサイズに対する相対値です。例えば、親要素のフォントサイズが16pxの場合1emは16pxとなり、親要素のフォントサイズが変化する場合は、1emの値も変化します。

「em」は、要素のサイズを親要素に対して相対的に指定する場合に便利です。例えば、テキスト内の一部分だけを太字にする場合、そのテキストの親要素のフォントサイズに対して相対的に太字を指定することができます。

pxと%との違い

「px」は絶対値で「%」は相対値として扱われる単位です。例えば、フォントサイズを100pxと指定すると常に文字の大きさは100ピクセルの大きさになり、50%と指定すると、文字の大きさは親要素のサイズに対する相対値になります。

「px」は、絶対値で指定するため、画像やボックスなどのサイズを固定する必要がある要素に使用されやすいです。一方で「%」は、レスポンシブデザインにおいて、画面サイズに合わせて要素のサイズを調整する場合に使用します。親要素のサイズに合わせて要素のサイズを自動的に変更するため、コード量を減らす目的で利用されることが多いです。

remとemの違いを理解するために知っておくべきこと

image by iStockphoto

WebデザインやWeb開発において、CSSの単位としてよく使われるremとem。両者には違いがあり、どちらを使うべきか迷う人も多いかもしれません。本記事では、remとemの違いについて解説し、どちらを使うべきかを考えます。

1.レスポンシブデザインとの関係性

remは「root em」の略称で、root要素（HTML要素）のフォントサイズを基準としていてemは、その要素の直近の親要素のフォントサイズを基準としています。

remは、ブラウザのデフォルトフォントサイズやユーザーの環境設定に左右されないことから予測可能なレイアウトを実現することが可能です。この性質から、レスポンシブデザインにおいては画面サイズに合わせてフォントサイズを変更する際にremが多く使われています。

2.フォントサイズの変更に対する影響

emはその要素の直近の親要素のフォントサイズを基準としているため、親要素のフォントサイズが変更されると子要素のフォントサイズも変更されます。

これに対してremは、root要素のフォントサイズを基準としているため、親要素のフォントサイズが変更されても子要素のフォントサイズに影響はありません。つまり、emは親要素のフォントサイズに依存するため、予期しないレイアウトの崩れが起こりやすいというデメリットがあります。

3.ブラウザのデフォルトフォントサイズとの関係性

emとremの大きな違いは親要素のフォントサイズとの関係性です。emは親要素のフォントサイズを基準として相対的な値になるため、仮に親要素のフォントサイズが16pxである場合、子要素に1emを指定するとフォントサイズは16pxになります。

一方、remはroot要素のフォントサイズを基準として相対的な値を取るため、root要素（HTML要素やブラウザのデフォルト）に指定されたフォントサイズが16pxである場合、1remのフォントサイズも同様に16pxです。このため、親要素のフォントサイズに依存しないremの方が全体的なサイズを管理できるため、フォントサイズの管理が容易になります。

remとemのメリット・デメリット

image by iStockphoto

CSSにおいてテキストや要素のサイズを指定するためにremとemを使用します。remはroot要素のフォントサイズを基準に、emは親要素のフォントサイズを基準にサイズを指定することができますが、それぞれのメリット・デメリットもあるのでみていきましょう。

remのメリット・デメリット

remのメリットとしては、root要素のフォントサイズを基準にするためブラウザの設定に合わせてフォントサイズを自動的に調整することができる点が挙げられます。つまり、ユーザーがブラウザのフォントサイズを変更してもページ内の要素のサイズが自動的に変更されるため、ユーザビリティが向上するでしょう。

remのデメリットとしては、root要素のフォントサイズを変更することによって全ての要素のサイズが変更されてしまう点が挙げられます。これはメリットの真逆を意味してしまいますが、一部の要素だけを変更したい場合には不便に感じられるでしょう。

emのメリット・デメリット

emのメリットとしては、親要素のフォントサイズを基準にするため親要素のフォントサイズを変更することで、その子要素のサイズをまとめて変更することができる点です。つまり、要素や各ブロックごとに細かくデザインの変更に柔軟に対応することができます。

emのデメリットとしては、要素がネストされた場合に親要素のフォントサイズを変更することで、意図しないところまで変更されてしまうことがある点です。つまり、意図しないレイアウト変更が起きる可能性があるため、扱いにくい場合があります。

remとemの使い方

image by iStockphoto

remとemはどちらも相対単位で、ブラウザのフォントサイズに応じて変化します。しかしremはroot要素のフォントサイズに基づいて変化し、emはその親要素のフォントサイズに基づいて変化するため扱い方に注意が必要です。それぞれの使い方に適した場面があるのでみていきましょう。

フォントサイズのremとemの使い方

フォントサイズを指定する際にはremが適しています。root要素のフォントサイズを基準にしているため、ページ全体のフォントサイズを統一することができることや、修正が必要になったときにroot要素のフォントサイズを変更することで、全てのフォントサイズを一括で変更することができるため保守性にも優れていることからフォントサイズの指定に使われやすいです。

要素ごとのフォントサイズを指定する場合はemが適しています。例えば、見出しや段落のテキストの大きさを変更したい場合には、その要素自身のフォントサイズを基準にすることで調整が可能です。このように、emは要素ごとに調整することができるため柔軟性に優れています。

レスポンシブデザインでのremとemの使い方

レスポンシブデザインにおいては画面サイズに応じて要素のサイズを変更する必要があります。その際、思い通りのデザインを実現するためにはremとemを併用することで柔軟に対応することになるでしょう。

例えば、レスポンシブデザインでスマートフォンからPCまで様々な画面サイズに対応するWebページを作成する場合、root要素のフォントサイズを変更することで全体的なレイアウトの調整を行うことができます。一方で、要素ごとのフォントサイズはemで調整して全体的なデザインを作る。このようにremとemを組み合わせることで、画面サイズに応じた柔軟なデザインを実現することができます。

remとemの違いを理解してWebサイトのスタイリングに活かそう！

remとemはどちらも相対的な単位で、文字や要素の大きさを指定する際に使われます。ただし、remはroot要素のフォントサイズに基づいて、emは親要素のフォントサイズに基づいて大きさが変わるため注意が必要です。remはブラウザの設定によって変わるフォントサイズに対しても対応でき、emは親要素のフォントサイズが変わるため、デザインの一貫性を保つ際にはremの使用が推奨されます。

Webサイトのスタイリングにおいてremとemの使い分けを正しく理解して活用することで、ブラウザの設定に応じたレスポンシブデザインを実現できますが、単位の使い分けを間違えると、意図しないデザインになってしまうかもしれません。

remとemの違いを理解して適切に使い分けることでより使いやすく、より美しいWebサイトを作ることができます。しっかりと理解して、効果的なスタイリングに活かしてみてください。