これは何も付け加えていないテキストです
これがmargin-left: 20em;です
これがmargin-left: 20rem;です
これがmargin-left: 20px;です
これがmargin-left: 20%;です
em(エム)について分かりやすく式に表すと、emのサイズ(px) = [親要素のフォントサイズ(px)] × [emの値]となる。
emは親要素のフォントサイズの相対値を指定している。
実はremはroot emの略である。remは上の結果を見ると分かる通り、emと同じ幅で動いている。それもそのはず、rem(レム)について分かりやすく式に表すと、
remのサイズ(px) = [ルート要素のフォントサイズ(px)] × [remの値]となる。
emが親要素であるフォントサイズの相対値を指定しているのに対し、
remはルート要素であるフォントサイズの相対値を指定しているということである。
親要素について、HTMLとCSSのサンプルを用いて表すと、
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<body>
<div class = "oya">
<p class = "ko"> こんにちは </p>
</div>
</body>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.oya{
font-size: 10px;
}
.ko{
font-size: 2em;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
このように、oyaクラスで設定されたフォントサイズである10pxに対し、koクラスでは2emと設定された。
emは親要素のフォントサイズの相対値となっているため、oyaクラスで設定されたフォントサイズの10pxがemのサイズを決める。つまり最終的なフォントサイズは20pxとなっている。
それに対し、ルート要素というのはhtmlタグで保存されている要素のことで、そのhtmlタグ保有のフォントサイズの相対的な値がremとなる。html内のフォントサイズは常に一定であるため、emのように親要素で決められたフォントサイズに左右されることなく値を設定できる。
px(ピクセル)は画面上の点のことで、論理的な単位である。
例えば解像度1920px × 1080pxサイズのモニターを使っていて、CSSで margin-left: 960px; と指定した場合、画面左に960px分の空白をあけるということである。その場合文字の左端は画面の中央に位置される。
しかし、画面上の1ドットを基準としているが、pxは論理的な単位であるので、ブラウザをズームした時には文字の左側は中央にこない。次にmargin-left: 960;に設定した文字を配置しておくので、1920 × 1080のモニターがあればぜひ試してみてほしい。これはmargin-left: 960;です