こんにちはmacoです。
今回は、「CSSのフォントサイズをpxからremに変えたら捗った話」をしたいと思います。
皆さんは、CSSのフォントサイズの単位は何で指定していますか？
僕はつい最近までpxでずっとやってきましたが、remに変えたら作業が捗ったので書こうと思います。
特にレスポンシブデザインのサイトを作っている人はこれを読むとスマホ対応が楽になります！
フォントサイズがpxの場合に面倒なこと
レスポンシブサイトでフォントサイズをpxに指定するとどうなるでしょうか？
そう、スマホ対応の際にフォントサイズを一つ一つ適当なサイズに調整していかなければいけません。
デザインパーツごとにフォントサイズを細かく指定している場合はかなり面倒ですよね(^_^;)
しかも「あっ！ここのフォント小さくするの忘れてた！」というミスも起こります。
そんなときはフォントサイズをremにしてみよう
いままでフォントサイズはpxだけ使ってきた！という人は、このremという単位は聞き慣れないかと思います。
remの特徴は、ルートのフォントサイズを1rem（基準）として計算するということです。
つまり、<html>タグに指定したフォントサイズが16pxなら、1rem=16pxになるということになります。
そのため、<html>タグのフォントサイズを変更するだけで、remで指定されたすべてのフォントサイズを比率を保持したまま変更することができるのです！
html{ font-size: 16px; }
だとすると、h2のフォントを32pxにしたい場合は、
h2{ font-size: 2rem; }
になります。
このように、remを使うだけでレスポンシブレイアウトの面倒な作業をだいぶ減らすことができました！
皆さんもぜひ使ってみてください！
