font sizeをrem表記にすると、CSSもスッキリ

2019年8月10日11:49 AM｜WebSite制作

フォントサイズ指定、どうしていますか。
私もWEBの変遷で、「px」や「%」も使って来たけど、今の主流は「rem」。
古いコンテンツを修正する機会があったので、メモしておきます。

CSSでfont-sizeを100%と書くと、ブラウザでは16pxで表示されます。
以下のfont-sizeはブラウザで同じサイズです。

　100% = 1em = 1rem = 16px = 12pt

絶対値とか相対値とかあるのですが、長くなるので今回は割愛します。
簡単に書くと、レスポンシブデザインの時に面倒がなく効率がいいのが「rem」です。（ざっくりしすぎた説明ですみません。）

「rem」を使う場合、「1rem」だと基本「16px」なのですが、
このままだと、「18pxだと何rem？」という事になり判りにくい。

ですので、CSSの最初に以下のように書きます。

html{
font-size: 62.5%;
}

この

font-size: 62.5%;

という謎のパーセントですが、62.5%がちょうど、「1rem」「10px」になるパーセント。
「1.2rem」と書けば「12px」、「1.6rem」と書けば「16px」になる訳です。

だから、サイト全体のfont-sizeを16pxにした時は

body{
font-size:1.6rem;
}

と書きます。

これだと、書きやすいよね！

とはいえ、以前作ったサイトを見ると、「px」とか「％」なんかをバリバリ使っていて、それ程不具合がある訳でもなく。
というか、以前はIE8で「rem」を使えなくて、px指定も同時にしたような気もしますし…。私としては、あれはついこないだの様に思えるんですが…。基本IEのせいですね。

CSS3も定着したし、レスポンシブサイトになってから、考えたり調整する事も増えたし「rem」で統一した方が早いって事で、定着し今に至る。って事なのでしょう。