CSSのフォントサイズの指定の仕方

• %とは、文字サイズでいうと1文字を何%で表示するか指定できる単位
• 100%は1文字分

px、em、%の違い

• この3つの単位の明確な違いは「絶対指定」と「相対指定」のどちらに当てはまるか
• 絶対指定「px」
  • 「絶対」なので固定された値になる
  • pxで文字サイズを指定するとIEで拡大されないのはある意味正しい動き
• 相対指定「em」と「%」
  • 「親分」に合わせて動く「子分」のような値

CSSの解説

• pxでの指定はもろもろの問題があった
  • IE9以前がpx指定された文字の拡大ができなかった
  • ブラウザによって文字が大きさが変わって、デザイン上よろしくない
• そこで、html要素にフォントのサイズを一つ定義し、すべての子要素を「rem」で定義することで、文字サイズの変更にも対応できるようにした

取りあえずデフォルトのCSSをリセットする

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}

ベースフォントサイズを10pxにする

• デフォルトの16pxの代わりに、1emが10pxになるように調整する (16px * 0.625 = 10px)

html {
  font-size: 62.5%;
}

bodyのフォントサイズを1.4pxにする

• 上の設定により「px」を使用するのに類似した感覚でフォントサイズを指定できるようになる
  • 下記の設定により、bodyのfont-sizeは1.4pxになる

body {
  font-size: 1.4em;
}

親要素のフォントサイズに影響されないようにremを用いる

• 「em」は親のfont-sizeに相対的で、複利計算され問題を起こすことがある
• 「rem」を使えば、常にルート（またはhtml要素）に相対的にサイズを指定することができる

.page-heading {
  font-size: 2.8rem;
}

※ bodyをemで設定しているのは、Chromeのバグ対応

• Chromeでfont-sizeを相対指定したとき、フォントサイズが大きく表示されることがある
• Chrome not respecting rem font size on body tag?

参考

• あなたはどれにする？CSSの文字サイズ指定「px、em、%」
• [CSS]emとは
• [CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック