CSS 長さの単位(px,em,rem)のサンプル

CSSの長さの単位(px,em,rem)のサンプルです。

px(ピクセル)
em
rem

px(ピクセル)

ディスプレイはピクセルの集まりでできています。
例えば、ディスプレイの解像度が1920*1080の場合、横に1920ピクセル、縦に1080ピクセルあることになります。その1ピクセルをCSSの1pxとする単位です。※

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

※iPhoneのRetinaディスプレイは異なります。

em

要素にあるfont-sizeの値を1とする単位です。
1.2emとした場合、1.2倍になります。
要素にあるfont-size自体にemが指定されている場合は親要素のfont-sizeを1とします。
親要素に上がっていてもfont-sizeのpx指定がない場合は、ブラウザのデフォルトのfont-sizeが基準になります。

emのサンプル1

11行目のbox1について
4行目のwidthの1emは、3行目のfont-sizeを1とします。
結果、widthは22pxになります。

<style>
#box1{
	font-size:22px;
	width:1em;
	background-color:pink;
}
#box div{border:1px solid #000;}
</style>

<div id="box">
	<div id="box1">あ</div>
</div>

emのサンプル2

14行目のbox2について
6行目のfont-sizeの1emは、3行目のfont-size18pxを参照します。
結果、font-sizeは18pxになります。
7行目のwidthの1emは、6行目のfont-sizeを参照します。
結果、widthは18pxになります。

<style>
#box{
font-size:18px;
}
#box2{
	font-size:1em;
	width:1em;
	background-color:pink;
}
#box div{border:1px solid #000;}
</style>

<div id="box">
	<div id="box2">い</div>
</div>

emのサンプル3

14行目のbox3について
6行目のfont-sizeの1.2emは、3行目の親のfont-size18pxを参照します。
結果、font-sizeは18*1.2=21.6pxになります。
7行目のwidthの1.2emは、6行目のfont-sizeが21.6pxを参照します。
結果、widthは21.6*1.2=25.92pxになります。

<style>
#box{
font-size:18px;
}
#box3{
	font-size:1.2em;
	width:1.2em;
	background-color:pink;
}
#box div{border:1px solid #000;}
</style>

<div id="box">
	<div id="box3">う</div>
</div>

rem

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

remのサンプル1

18行目のbox5について
11行目のwidthの1remは、4行目のルート要素のfont-size(20px)を参照します。
結果、widthは20pxになります。

<html>
<style>
html{
	font-size:20px;
}
#box4{
	font-size:18px;
}
#box5{
	font-size:22px;
	width:1rem;
	background-color:pink;
}
#box4 div{border:1px solid #000;}
</style>

<div id="box4">
	<div id="box5">あ</div>
</div>

</html>

remのサンプル2

18行目のbox6について
10行目のfont-sizeの1.2emは、4行目のルート要素のfont-size(20px)を参照します。
結果、font-sizeは20*1.2=24pxになります。
11行目のwidthの1.2emは、4行目のルート要素のfont-size(20px)を参照します。
結果、widthは20*1.2=24pxになります。

<html>
<style>
html{
	font-size:20px;
}
#box4{
	font-size:18px;
}
#box6{
	font-size:1.2rem;
	width:1.2rem;
	background-color:pink;
}
#box4 div{border:1px solid #000;}
</style>

<div id="box4">
	<div id="box6">う</div>
</div>

</html>