remというのは長さを表す単位でCSS3から新たに追加されたものですが、pxやemなどと同じようにフォントサイズを指定するときにも使うことができます。ちなみにremは「root em」を省略した形の単位です。

remの特徴

remもemや％と同じく相対指定で扱われますが、それらには違いがあります。まずはemや％でフォントサイズを指定した場合を見てみます。

//HTML
<p>親要素のフォントサイズ<span>子要素のフォントサイズ</span>親要素のフォントサイズ</p>

//CSS
html {
  font-size: 100%;
}
p {
  font-size: 87.5%;
}
p span {
  font-size: 75%;
}

このように基本サイズが16pxである場合、p要素を14px、p要素の中にあるspan要素を12pxのサイズで表示したいと上記のように指定してしまうと、p要素は14pxで表示されますが、span要素は12pxで表示されません。それは、emや％は親要素の値を継承してしまうためです。span要素の親要素はhtml要素ではなくp要素になるので、うまく表示されないというわけです。また、階層が深くなればなるほど計算が面倒になったりもします。

それでは、remを使ってフォントサイズを指定した場合を見てみましょう。

html {
  font-size: 100%;
}
p {
  font-size: 0.875rem;
}
p span {
  font-size: 0.75rem;
}

このように指定した場合、p要素は14px、p要素の中のspan要素は12pxで表示されます。これは、remという単位はroot要素、つまりhtml要素の値を継承するからです。これにより、どんなに階層が深くなっても親要素の影響は受けずに相対指定でのサイズ計算がとても簡単にできます。

相対指定でフォントサイズを決めるときには、試しにremを使ってみるのも良いのではないでしょうか。

おすすめの記事