font-sizeのremの使い方【CSS】

私は今までpxでフォントサイズを指定してきましたが

最近ではremといったサイズ指定ができるようになっているので
そちらを説明します

そもそもremってなんなん？

remというのはroot emの略です

remはrootのフォントサイズを1として構成される単位になります。
CSSで書いている　html要素のことです

htmlのfont-sizeが16pxだろうが、18pxだろうが、remは「1」ということになります。

html{
    font-size:16px;
}

この時に、「2rem」とすると、
htmlの16pxの2倍ということとなり　32pxとなります。
18pxだったら36pxですね！

このようにhtmlで決めたフォントサイズから相対的にサイズ指定ができる単位がremです

レスポンシブでいちいち全部変えないといけないのを防げます！

remの使い方

レスポンシブで非常に便利なremですが
計算しやすい数値を予めrootに設定してあげると迷いません。

html{
    font-size:62.5%;
}

これで決めちゃいましょう！
なぜ62.5％なん？100％でいいんちゃう？
思う方もいるかと思いますが、これで10pxになります。
10だと掛け算しやすいのでこうします。
例えば、20pxにしたいってとき　2remにしますし
28pxにしたいって時は2.8remでOKです。
こうした方が分かりやすいですよね。

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter