こんにちは、Yuriです。
今日は、ヒカルさんがnoteで、WDSG（Web Developer’s Sharing Guidelines）策定チームで作成した、［font-sizeの単位］のガイドラインを掲載してくださいました。
それを読ませていただき、私はまだ［font-sizeの単位］のことを勉強中なのですが、これを機会に学びを深めたいと思い今日の記事を書きます。
といっても、参考にさせて頂く記事を抜粋してほぼそのまま記載させて頂く、自分の忘備録となります。
ferretさんの以下の記事を引用させていただきます。
昨今のWebデザインを取り巻く環境の中では、「em」よりも「rem」の方が好ましいと言われている。
しかし、「em」もMedia Queriesのブレイクポイントとして指定するときには未だによく使うので、適材適所で使い分けるのがよい。
その際、「em」と「rem」の違いをしっかりと理解しておくことが重要。
「em」は、親要素に対しての相対的なサイズのこと。
例えば、bodyのfont-sizeを「100%」とした場合は、ブラウザのデフォルトのフォントサイズ「16px」が基準となり計算される。
ただし、相対指定は親要素の影響を受けてしまう、いわゆる「複利」の計算になってしまうので、入れ子された要素のときには注意が必要。
「em」は親要素に対しての相対計算を行うが、「rem」はroot(html)のフォントサイズを元に計算する。
常にrootが基準となるので、非常にわかりやすくスッキリとデザインを行うことができる。
もちろん、何もrootフォントサイズを指定していない場合は「1rem＝16px」という計算方法になるので、初めのうちはpxを扱っているときのように試行錯誤しながら適切なフォントサイズを探すことになる。
しかし、フォントサイズを調整する際にはrootのフォントサイズを変えるだけでいいので、メンテナンスを行いやすいというメリットがある。
CSSで最もよく使われているフレームワークであるBootstrapもバージョン4から「px」ではなく「rem」を採用するなど、Web制作の現場では「px」を使うことがだんだん少なくなってきた。
しかし、Media Queriesでは「rem」よりも「em」が推奨されるなど、単位ごとに特性を押さえて使用することが大切。
以上、ferretさんの記事を引用させていただきました。
私は、まだ実際にコードを書いて理解するところまではいけていませんが、ferretさんの記事が体系的に説明してくださっているので、少し雰囲気をつかめることができました！
