font-sizeの指定に～remという単位を使っているサイトがたくさんある。
font-size:16px と設定されていれば、
「字の大きさが16pxなんだな。」
とぱっとわかるんだけど、remで指定されていると
「えっどれくらいの大きさなの？？」
と思ってしまって、苦手だ（初心者で慣れていないせいだからだと思うが(笑)）
Contents
そもそもremって？
remって何だろうと思って、説明を見ると
「remはルート要素のfont-sizeを１とする単位」
と書いてある。
「は？？わかりにく過ぎ、、、」
というのが最初に見た時の感想だった(笑)
「そもそもルート要素ってなんだよ？」と。
ルート要素とは？
ルート要素というのは、ドキュメントの最初に現れるタグのことだそうだ。
HTML（正確にはHTML5）の文書は必ず下記のように<html>のタグで始まる。
1 2 3 4 5 6 7 8 9 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> ～ |
つまり、HTML文書のルート要素は<html＞要素のことを指しているのだ。
ちなみに<!doctype html>は、「この文書はHTML5で書かれているよ！」と宣言するために、 文書の先頭に記述するDOCTYPE宣言でタグではない。
HTML文書において
「remはルート要素のfont-sizeを１とする単位」
というのを訳すと
「remは<html>タグに設定されているfont-sizeを１とする単位」
ということだ。
例えば、<html>タグにfont-size:16pxと設定されている場合に
font-size:2remと設定したら
16pxの2倍なのでfont-size:32pxとなるってことだ。
これなら理解しやすい！
remの理解を難しくしていたのはルート要素っていう名前だった(笑)
