ォントサイズを「rem」で指定するべき理由
一般的に、相対指定は「％」や「em」、絶対指定は「px」を使ってフォントサイズを制御していると思います。しかし、CSS３から新たに追加された「rem」での指定の方が、IE８対応が少なくなってきた昨今、シンプルでいいのではないかと思うようになりました。
そこで今回は、この記事で「rem」の素晴らしさを紹介したいと思います。
remとは？
さて、「rem」とはどのような単位なのでしょうか。「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相対的に指定する単位になります。
では、「rem」を理解するために、下記に「em」と「rem」のコードを具体的に記載しましょう。
emでフォントサイズを指定
body { font-size:62.5%; } /* 10px */
p { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
まず、ベースフォントサイズを作ります。bodyに「%」を使って、主要ブラウザのデフォルトフォントサイズ「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6em」、「20px」にするには「2em」とシンプルに指定できるようになります。
しかし、「em」の場合、入れ子の構造になると、複利計算されてしまいます。例えば、「li」の子要素の「p」は「16px」にはならなく、「1.6px × 1.6」で「26px」となります。したがって、下記のように「li」の子要素の「p」に「1em」を記述してあげて、複利計算を避けなければなりません。
body { font-size:62.5%; } /* 10px */
p { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
li p { font-size: 1em; } /* 16px */
remでフォントサイズを指定
html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
p { font-size: 1.6rem; } /* 16px */
li { font-size: 1.6rem; } /* 16px */
li p { font-size: 1.6rem; } /* 16px */
一方、「rem」でのサイズ指定は、ルート（根）という名の通り、最上位の親要素（html要素）を基準値とするため、複利計算の心配はいらなくなり、どんなに入れ子になろうとも、シンプルに「1.6rem」は「16px」となるのです。
参考サイト：https://www.plusdesign.co.jp/blog/?p=5152
※計算方法
h1 {
font-size: 1.875rem; /* 30px/16px=1.875rem・何px計算は1.875rem*16px=30px */
}
