【CSS】「remはルート要素のfont-sizeを1とする単位」ってどういう意味?

font-sizeの指定に~remという単位を使っているサイトがたくさんある。

font-size:16px と設定されていれば、

「字の大きさが16pxなんだな。」

とぱっとわかるんだけど、remで指定されていると

「えっどれくらいの大きさなの??」

と思ってしまって、苦手だ(初心者で慣れていないせいだからだと思うが(笑))

スポンサーリンク

そもそもremって?

remって何だろうと思って、説明を見ると

「remはルート要素のfont-sizeを1とする単位」

と書いてある。

「は??わかりにく過ぎ、、、」

というのが最初に見た時の感想だった(笑)

「そもそもルート要素ってなんだよ?」と。

スポンサーリンク

ルート要素とは?

ルート要素というのは、ドキュメントの最初に現れるタグのことだそうだ。

HTML(正確にはHTML5)の文書は必ず下記のように<html>のタグで始まる。

つまり、HTML文書のルート要素は<html>要素のことを指しているのだ。

ちなみに<!doctype html>は、「この文書はHTML5で書かれているよ!」と宣言するために、 文書の先頭に記述するDOCTYPE宣言でタグではない。

HTML文書において

「remはルート要素のfont-sizeを1とする単位」

というのを訳すと

「remは<html>タグに設定されているfont-sizeを1とする単位」

ということだ。

remの説明

例えば、<html>タグにfont-size:16pxと設定されている場合に

font-size:2remと設定したら

16pxの2倍なのでfont-size:32pxとなるってことだ。

これなら理解しやすい!

remの理解を難しくしていたのはルート要素っていう名前だった(笑)

おすすめの記事