はじめに
コジマです。
CSSのサイズ指定で
pxや％はわかりますが、remってなんなん？
ってなったので軽く書くことにします。
まずはemから
emっていうのは、親要素のフォントサイズのこと。
その倍率を指定します。
1.2emなら親要素の1.2倍のフォントサイズだし
0.8emなら親要素の0.8倍のフォントサイズとなるわけです。
remってなんだ
remというのはroot em。つまりはルート要素（html要素）のフォントサイズのこと。
その倍率を指定します。
ルート要素（html要素）のフォントサイズのデフォルトは16pxです。
1.2emならルート要素の1.2倍のフォントサイズ（=19.2px）だし
0.8emならルート要素の0.8倍のフォントサイズ（=12.8px）となるわけです。
remとemの違いについてはMDN公式のサンプルソースがわかりやすかったです。
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units
emは親要素なので、ネストしていると子要素のフォントサイズがどんどん大きくなったりします。
remはルート要素に対する相対値なので、そのようなことはありません。
使い分けできるといいですね。
相対値を使うメリット
ブラウザの設定でフォントサイズを変更したときに設定が反映されるようになります。
pxなどの絶対値指定だと、ブラウザでフォントサイズを大きくしても
pxで指定したフォントサイズはそのままです。
remを使うとブラウザのフォントサイズが大きくなると、remを使用した要素のフォントサイズも相対的に
大きくなってくれます。
さいごに
似たような記事で詳しく書いてくれてる人たくさんいるので、
自分はこういうときいつもさらっとです。
本記事でのポイントは以下の通り
- remはルート要素に対する相対値！
- remはネスト構造でもレイアウト崩れない！
- remはブラウザ設定に順応してくれる！
参考サイトをいくつか載せておきますので
CSSの基本単位としてremを使うと超絶便利
CSS3のremとemの違いについて
【CSS3】フォントサイズを「rem」で指定するべき理由
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
以上、コジマでした。
