CSS pxとemとremの違い(長さの単位)

CSSの長さの単位のpxとemとremの違いです。

目次

長さの単位 px(ピクセル)
  em
  rem

px(ピクセル)

ディスプレイはピクセル(px)の集まりでできています。

ディスプレイの解像度が1920*1080の場合、横は1920ピクセル、縦は1080ピクセルです。

その1ピクセルをCSSの1pxとする単位です。

実際の1ピクセルの大きさは、ディスプレイの解像度によって変わります。
1920*1080の1ピクセルと1024×768の1ピクセルの物理的な大きさは異なります。
1024×768の方が大きいです。

コード

px使用したサンプルです。

<style>
#p1{
    font-size: 16px;
}
#p2{
    font-size: 24px;
}
</style>

<p id="p1">赤</p>
<p id="p2">赤</p>

以下のイメージになります。

em

要素にあるfont-sizeの値を1とする単位です。

1.2emとした場合、1.2倍になります。

要素にあるfont-size自体にemが指定されている場合は、親要素のfont-sizeを1とします。

親要素に上がっていてもfont-sizeのpx指定がない場合は、ブラウザのデフォルトのfont-sizeが基準になります。

コード

emを使用したサンプルです。

<style>
#p1 {
    font-size: 16px;
}
#s1{
    font-size: 1.5em; /* 24px; */
}
#p2 {
    font-size: 16px;
}
#s2{
    font-size: 2em; /* 32px; */
}
</style>

<p id="p1">赤<span id="s1">青</span></p>
<p id="p2">赤<span id="s2">青</span></p>

6行目は、1.5emです。16*1.5=24pxになります。
12行目は、2emです。16*2=32pxです。

以下のイメージになります。

rem

ルート要素(=HTML要素、<html>タグ)のfont-sizeの値を1とする単位です。

root emです。

コード

rem使用したサンプルです。

<style>
html {
    font-size: 20px;
}
#p1 {
    font-size: 1rem; /* 20px; */
}
#p2 {
    font-size: 1.5em; /* 30px; */
}
</style>

<p id="p1">赤</p>
<p id="p2">赤</p>

6行目は、1remです。20*1=20pxになります。
9行目は、2remです。20*1.5=30pxです。

以下のイメージになります。

以下は、MDNのCSS の値と単位のリンクです。
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units

関連の記事

CSSを記述する場所
CSS セレクタの優先順位
CSS スタイルの継承のサンプル(inherit)
CSS ボックスモデルの構造

△上に戻る