HTML/CSS

【書き方やメリットも解説】CSSのemとremの違いとは?

2021年8月5日

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

CSSの単位でemとremってあるけど、どう違うの?

emやremで書くことのメリットって何?

本日は上記の疑問にお答えします。

この記事でわかること

・CSSのemとremの違いがわかる

・emやremで書くメリットがわかる


この記事は3分ほどで読める記事となっておりますので、是非ご覧ください。

記事の信頼性

プロフィール画像

この記事は現役フロントエンドエンジニアのしのが執筆しております。

結論

それでは早速結論からお伝えします。

・emは親要素で指定されたpx(ピクセル)数に対しての比率で表示する

・remはhtmlで指定されたpx(ピクセル)数に対しての比率で表示する


????どういうこと?

と思われた方のために実際にコードを見てみましょう。

emで数値を指定してみよう

以下のコードを見てみてください。

こちらでは、emを使って「あいうえお」というテキストの数値を指定しています。

See the Pen by shino (@rytym0720) on CodePen.

コードの解説

それではコードの解説です。

emは親要素でしている数値と相対した数値を指定できるため、分かりやすいようにクラス名を

・親要素:parent

・子要素:child


としました。

その上で、parentでfont-size24pxを指定し、子要素となるchildでは0.5emという指定をしました。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>emとは</title>
</head>
<body>
  <div class="parent">
    <p class="child">あいうえお</p>
  
</body>
</html>

CSS

.parent{
  font-size:24px;
}

.child{
  font-size:0.5em
}

その結果、childのpxはいくつになると思いますか?

そうですね、24pxの0.5emなので半分の12pxになります。

何となくイメージがつかめますでしょうか。

繰り返しとなりますが、emでは親要素で指定した数値を元に、子要素の指定できるのが特徴ですね。

remで数値を指定してみよう

では次にremで数値をしてみましょう。

remはhtmlで指定した数値を元に数値を変えることが出来る指定方法です

こちらでは、先ほどと同じくparentとchildとクラス名をつけているのですが、これはあえてemとの違いを示すためにそのままにしています。

See the Pen by shino (@rytym0720) on CodePen.

コードの解説

それではコードの解説です。

parentは24pxを指定し、childは0.5remを指定していますが、この場合は結果はどうなりますでしょうか。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>remとは</title>
</head>
<body>
  <div class="parent">
    <p class="child">あいうえお</p>
  
</body>
</html>

CSS

html{
  font-size:30px;
}

.parent{
  font-size:24px;
}

.child{
  font-size:0.5rem;
}

繰り返しとなりますが、remは親要素ではなく、htmlで指定した数値を元に数値を割り出します

そのため、ここでは

・htmlが30pxでchildが0.5rem


上記の理由から30pxの半分の数値である15pxとなります

remとemのメリット

remやemを使うメリットとしては以下になります。

・htmlや親要素の値を変えれば一括で変える事が可能。つまり、可変するfont-sizeなどの場合に便利。逆に可変しないものはpx指定が適切。

値が可変すると言えば、真っ先に思い浮かぶのがWEBサイトのレスポンシブ化だと思います。

レスポンシブ 化とは

レスポンシブ化とは、WEBサイトをパソコンだけではなく、スマートフォンやタブレットなどの様々なデバイスでも適切な表示で閲覧できるように処理する事です。

スマホでWEBサイトを閲覧するときにパソコンと同じサイズのfont-sizeでは大きすぎたり、逆にスマホ用のfont-sizeではパソコンで見る時に小さかったりします。

スマートフォン

そのため、閲覧されるデバイスごとにfont-sizeを調整する必要がありますが、remやemを使う事で一括で調整する事が出来便利です。

具体例を見てみましょう。

//PCサイズで見る時
media screen and (min-width: 768px) {

html{
   font-size:16px;
}
}
//スマホサイズで見る時
media screen and (max-width: 768px) {

html{
   font-size:0.8rem;
}

上記ではつまり

PCサイズでは16pxで表示するけど、スマホサイズでは16×0.8remで表示するね


という仕様にしているという事ですね。

remを使う事でスマホなどのレスポンシブ化は便利です。

emを使う場合も特定の親要素の中だけでより細部に微調整したいという事であれば有効です。

じゃあpxは使わないの?

ここまで読まれた方の中には

最近はスマホサイズで見れないサイトなんてほとんど無いからpxで指定することはないって事?

と思われた方もいるかもしれません。

結論としては「NO」でして、例えば値を変えたくない要素も中にはありますよね。

例えばborderの幅などです。

font-sizeは確かにremやemを使う方が昨今のWEB制作環境的には便利かもしれませんが、それ以外の要素、divなどで作るBOXなどもpxで指定する方が良いケースもあります。

一概に「remが良い」「pxはダメだ」という話では無く、ケースバイケースによるという事です。

制作を担当する人間としては、「remもemもpxも使えますよ!使い所で適切に使います!」という状態が最強ですね。

まとめ

というわけで本日はremやemの使い方、メリットについてご紹介してきました。

WEB制作では基礎的な部分ですが、自身もうろ覚えになってるところがあったので改めて勉強する良い機会になりました(笑)

明日も良い日になりますように。

それではまた次の記事でお会いしましょう♪

おしまい。

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

-HTML/CSS
-