LoginSignup
11
13

More than 5 years have passed since last update.

CSSでfont-sizeの単位はremを積極的に使いたい

Last updated at Posted at 2018-06-19

CSSでのフォントサイズ指定

pxを使うと、ブラウザを拡大したときとかにどうやら反映されないらしい。

じゃあどうする?

  • emを使う
    • 親要素のフォントサイズを基準に倍率を指定するため親要素によってはフォントサイズが統一されない。
  • remを使う
    • Root要素のフォントサイズを基準に倍率を指定するから使いやすい!

remってバグがちらほらあるらしい…

remという単位自体が問題というか、ブラウザが悪い。
表示バグは下記

IEでremが反映されない

IE9以上?(IE8はそもそも対応してない)で :after や :before の疑似要素のline-heightをrem指定すると反映されないらしい。

line-heightはそもそも単位を指定しなければ倍率指定できる。
line-height: 1 とすれば指定した要素のフォントサイズになる。
remを使う必要がないため、問題ない!

Chromeでhtmlに指定したフォントサイズが反映されない

これはChromeで下記のように指定されたものが反映されないらしい。

sample.css
html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
}

こうすると、通常htmlに指定したパーセント指定font-sizeでブラウザのデフォルトサイズから62.5%された値が設定され、bodyではその1.4倍を使うという指定になっている。

しかし、ChromeだとbodyもRoot要素だと判断されるためか、htmlのfont-sizeが無効になり、デフォルトフォントサイズから1.4倍されるらしい。

回避策

sample.css
html {
  font-size: 62.5%;
}

body {
  font-size: 1.4em;
}

bodyのfont-sizeの単位をemに変更することで回避できる。
この場合だけ、remではなくemを使う。

さいごに

みなさんもこの機会にremを使ってみてみればいかがでしょう?
(IE8対応はしらない)

結構適当に書いたので明らかに間違ってる所があればご指摘おねがいします…

11
13
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
13