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

「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を使う場合も特定の親要素の中だけでより細部に微調整したいという事であれば有効です。