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

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

« 次の記事

さくらVPS環境でのパーミッション設定

【0から学ぶWordpress】さくらVPSでのパーミッション

前の記事 »

ヘッダーの色を途中で変えるCSS+JQuery