スタイルコードに出てくる文字サイズ「em」と「rem」の違い、使い分けの仕方(メモ)

公開日:2024(令和6)年5月18日/最終更新日:

Image Of News & Diary

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



スタイルコード(CSSに記述するコード)で文字の大きさを指定するときなどに使う「em」と「rem」、理解して使いわけていますか?

コピペで..というような参考ページのスタイルコードをそのまま貼り付けて「よし!」としていませんか?

実は中に書かれている「em」「rem」には違いがあり、誤った使い方をしていると、自身の見ている環境以外ではとんでもないことになっているかも知れません。

そこで本ページでは、私が理解している範囲での「em」と「rem」の違い、使い方をメモ代わりに公開しておきます。

このページをご覧いただいて分かる通り、私はデザイナーではありませんし、特に「em」と「rem」にこだわりを持って使い分けているわけでもありませんので、詳しい情報はご自身でいろいろと探してみてください

「em」と「rem」は基準となるサイズが異なる

「em」はすぐ上の親要素の文字サイズを基準としてどの割合の大きさにするのかを相対値や割合で指定します。

font-size:1em;

例えば「Google Chrome」ブラウザーでは基本となる文字サイズが16pxなので、1emは16pxとなります。

ただし、その要素(子要素)を囲む要素(親要素)があり、そこに別の文字サイズが指定されている時は、親要素の文字サイズを1とした相対値や割合で計算されたものが文字サイズになるという仕様になっています。

一方「rem」は表示しているブラウザーの基準文字サイズを1として相対値や割合で指定します。

font-size:1rem

例えばよく使われているGoogle Chromeブラウザーでは基本となる文字サイズが16pxなので、1remは16pxとなり、その要素を囲む要素に文字サイズの指定があっても常に16pxに対する割合や相対値で計算された値になります。

以下のようなHTMLとスタイルコードを使ってemとremで同じ0.5という相対値を指定した場合の表示の違いです。

【HTML】

emで0.5を指定した時の文字サイズ
emで0.5を指定した時の文字サイズ

【スタイル】

.sample-parent-div{
font-size:30px;
}

.em-sample{
font-size:0.5em;
}

.em-sample{
font-size:0.5rem;
}

【ブラウザー上の表示】

emで0.5を指定した時の文字サイズ
emで0.5を指定した時の文字サイズ

親要素をあえて30pxと大きめにしているので、こうして実際に表示させてみると一目瞭然ですね。

数字的には、emの場合は「30pxの半分」、remの場合はChromeブラウザなら「16pxの半分」になっています。

従って、冒頭で紹介したようにどこかのコードをコピペした場合には、親要素によっては参考コードとまったく違う表示になってしまったり、関係なくうまく表示できたりするという現象が発生するのです。

QA Analytics QA Analytics

「em」と「rem」の使い分けと私見

「em」と「rem」の使い分けの基準を言葉で表現すると以下のようにすればいいと思います。

  • 独立したコンテンツとして表現したい場合で、一番親となる要素に絶対値で文字サイズ指定されているのであれば子要素に「em」を使う
  • 上記の場合でなければ、ページ全体のバランスが取れる「rem」を使う

平たく言えば、通常はremを使っておいて、ここだけ限定したいというところだけemを使うという感覚でよいのではないかと思います。

ちなみにここで書いた通り、私はこのサイトでは基本的にremを使い、emで指定している部分はほぼありません(ひょっとするとWordPress本体やプラグインなどで意図的にemが使われているところがあることを除き、自身で追加したコードにはemはありません)。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

Image Of News & Diary
当サイトの動作環境について 使用しているテーマは何?使ってるプラグインは何?