ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

%、em、remについて-CSS プロパティ値における違いを理解するWeb制作講座

今回のホームページ制作講座ではCSS(カスケードスタイルシート)でパーセントやemまたはrem指定において、それぞれの相違点する一連の流れについてプロパティ値における違いを理解することに関して解説しています。

 

[第1の解説]
まずは、%(パーセント)について


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

 

 

[第2の工程]
次に、em(エム)について


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

 

 

[第3の工程]
最終に、rem(root em)について

 

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

 

 

この解説記事について補足したい点がありますが、それはemやremは小数点以下が換算しずらくなるので、参照親要素の指定値を62.5%とすることで1em=10pxなどに暗算しやすくなるが、煩雑になるだけなのであまり推奨できない点に関しては留意しておいた方がよいでしょう。