html・cssfont-sizeプロパティで使える単位のremについての紹介です!「remって何?」「使い方がわからない」「emや%とどこが違うの?」などなどあると思いますので、それを踏まえて紹介していきますね。目次remの使い方remの記述の仕方remの使い方remはcss3から使えるようになった新しい単位です。remは「em」や「%」と違って、親要素を継承しません。<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」で表示されてましたよね。remの場合、p要素のfont-sizeを「1.5rem」とした場合だと、親要素のdivのフォントサイズに影響を受けずにhtmlのfont-size「62.5%=10px」の1.5倍の15pxになります。いうようにremを使うとroot要素(html)を基準とした、相対的な文字の大きさにする事ができるのです。「em」や「%」のように入れ子にすると、徐々に拡大・縮小されたりすることもありません。常にroot要素(html)を基準にして「〇〇倍」というように使えるので、とっても便利なんです。10px」になるの?と思うかもしれませんが、それは下のような計算をしているからです。1rem※「1em」と「1rem」が「16px」というわけではないので注意!あくまでもブラウザの初期値でのフォントサイズです。ブラウザの初期値は16pxですよね。htmlのfont-sizeを62.5%と設定すると、ブラウザのフォントサイズの62.5%分がhtmlのフォントサイズとなります。htmlのフォントサイズ(62.5%)という計算ができるわけです。10px」となるのです。remの記述の仕方こんな便利なremですが、一つ問題があります。それはCSS3から使えるようになった単位のため、IE系のブラウザに対応してない場合があります。実際にremを記述する時は下のような感じで、最初にpxで指定して、後にremで上書きしていくようにしなければなりません。※cssは下に記述したものから優先されるため、下に記述したremが適用されなければ自然とpxが適用されます。IE(インターネットエクスプローラー)系のブラウザでremが反映されなくてもpxが反映されるわけです。font-size:1.0rem;}/*cssは下に記述したものが優先される*/ちなみに下のようにhtmlのフォントサイズを「62.5%」としておくことで、1remが10pxくらいのサイズになるのでとても便利です。