font-sizeのremの使い方とemとの違い【CSS3】

remの使い方

font-sizeプロパティで使える単位のremについての紹介です!

「remって何?」「使い方がわからない」「emや%とどこが違うの?」などなどあると思いますので、それを踏まえて紹介していきますね。

目次
remの使い方
remの記述の仕方

remの使い方

remはcss3から使えるようになった新しい単位です。 remは「em」や「%」と違って、親要素を継承しません

html{ font-size:62.5%; }
div{ font-size:12px; }
p{ font-size:1.5em; }
<html>
<div>
    <p>1.5em(18px)</p>
</div>
</html>

例えばhtmlのfont-sizeを「62.5%」。 divのfont-sizeを「12px」。 div内のp要素のfont-sizeを「1.5em」と設定した場合、p要素のフォントサイズは親要素のdivのfont-size「12px」の1.5倍「18px」で表示されてましたよね。(emや%の場合だと) ですがremの場合、p要素のfont-sizeを「1.5rem」とした場合だと、親要素のdivのフォントサイズに影響を受けずhtmlのfont-size「62.5%=10px」の1.5倍の15pxになります。

こういうようにremを使うとroot要素(html)を基準とした、相対的な文字の大きさにする事ができるのです。

なので「em」や「%」のように入れ子にすると、徐々に拡大・縮小されたりすることもありません。 常にroot要素(html)を基準にして「〇〇倍」というように使えるので、とっても便利なんです。

なんでhtmlのfont-size「62.5% = 10px」になるの?と思うかもしれませんが、それは下のような計算をしているからです。

ブラウザの初期値(font-size:16px)× 62.5% = 10px

ブラウザの初期値のフォントサイズ
100% = 16px = 12pt = 1em = 1rem

※「1em」と「1rem」が「16px」というわけではないので注意!あくまでもブラウザの初期値でのフォントサイズです。

ブラウザの初期値は16pxですよね。 htmlのfont-sizeを62.5%と設定すると、ブラウザのフォントサイズの62.5%分がhtmlのフォントサイズとなります。 つまりブラウザの初期値のフォントサイズ(16px)× htmlのフォントサイズ(62.5%)という計算ができるわけです。

なのでそれを計算して「62.5% = 10px」となるのです。

remの記述の仕方

remの記述の仕方

こんな便利なremですが、一つ問題があります。 それはCSS3から使えるようになった単位のため、IE系のブラウザに対応してない場合があります。 なので実際にremを記述する時は下のような感じで、最初にpxで指定して、後にremで上書きしていくようにしなければなりません。

※cssは下に記述したものから優先されるため、下に記述したremが適用されなければ自然とpxが適用されます。なのでIE(インターネットエクスプローラー)系のブラウザでremが反映されなくてもpxが反映されるわけです。

/* htmlのfont-sizeを62.5%にした場合 */
p{
  font-size:10px;
  font-size:1.0rem;
}
/*cssは下に記述したものが優先される*/

ちなみに下のようにhtmlのフォントサイズを「62.5%」としておくことで、1remが10pxくらいのサイズになるのでとても便利です。

html {font-size:62.5%;}
body {font-size:10px; font-size:1.0rem;}
p {font-size:15px; font-size:1.5rem;}

以上「font-sizeプロパティremの使い方とemとの違いについて」でしたー(^^♪