CSSでプロパティ値の%、em、remを違いを理解する情報

Web制作のCSS(カスケードスタイルシート)にかかわる工程で、パーセントやemまたはrem指定についてそれぞれの相違点を情報として記録しておいた方が良いと考えたので、プロパティ値%、em、remの違いを理解することについて解説しています。

 

》ひとつめの情報-%(パーセント)。

親タグ要素のフォントサイズを相対的に参照。指定がない場合はデフォルトで16px=100%でサイズ指定という特徴があります。

 

 

》ふたつめの情報-em(エム)。

文字の高さを1emとして親タグ要素のフォントサイズを相対的に参照。%とほぼ同義でデフォルトでは16px=1emでサイズ指定という特徴があります。

 

 

》みっつめの情報-rem(root em)。

CSS3から実装された値で絶対的にrootタグであるhtmlの指定していされた値を参照。デフォルトでは16px=1remでサイズ指定という特徴があります。

 

 

その他の情報については、emやremは小数点以下が換算しずらくなるので、参照親要素の指定値を62.5%とすることで1em=10pxなどに暗算しやすくなるが、煩雑になるだけなのであまり推奨できない点という特徴があります。