QKAKE::TECH

テックなことを書く

「rem」という便利なサイズ指定【CSS3】

フォントサイズ(font-size)やマージン(margin)などのサイズを指定するとき、みなさんは何の単位を用いているでしょうか。
僕はいまの仕事を始めてすぐのころLP(ランディングページ)を作っていたのですが、そのときは何も考えずにピクセル(px)指定をしていました。

これだと、作業環境のPCから見る分には良いのですが、タブレットスマートフォンなど別の端末で閲覧することも想定するとよろしくありません。
というのも、ピクセルという単位は絶対指定であるため、PCから見る分には適当なサイズであったとしてもスマートフォンからみると大きすぎるなどの問題が生じてしまうからです。

じゃあどうしたらいいかというと、自らより大きな範囲のものに対応してサイズが調整されるような相対指定をしてあげればよいのです。
相対指定をするための単位にはいくつか種類があり、「em」「%」などがあります。
その中でも便利だなと思ったのが「rem」という単位です。

「em」を使った例

html { 
  font-size: 100% /* =16px */
}
body {
  font-size: 2em; /* =32px */
}
p {
  font-size: 1em; /* =32px */
  /* font-size: 0.5em; =16px */
}

「rem」を使った例

html { 
  font-size: 100% /* =16px */
}
body {
  font-size: 2rem; /* =32px */
}
p {
  font-size: 1rem; /* =16px */
}

ご覧のとおり「em」や「%」がさまざまな親要素の影響を受けて複利計算されるのに対して、「rem」はhtml要素(root)に指定されたフォントサイズからの倍率で表示されます。
これで、メディアクエリなどで端末ごとにhtml要素のfont-sizeを適当なサイズに指定してあげることで、それに相対したサイズで要素を表示することが可能になりますね!

唯一「rem」の欠点があるといえば、非対応ブラウザがあるということです。
対応ブラウザの確認はこちらから。
IE8に対応していないというのが少し厄介なところです。(2015年10月14日時点)

  • 小話

モバイルフレンドリーであることがGoogleに評価される条件に含まれると知らされた当時(2015年4月21日導入)、Webデザイナーとして仕事していた僕はレシポンシブ(レシポンシブルではない)デザインを考慮したWebアプリケーション制作に追われることになったのでした。


参考

オススメ本

保守性のあるcssとはどういうものなのか、場所に依存しないスタイル指定の仕方などを学ぶことが出来ます。

レシポンシブデザインとはどういうものなのか、実例を用いて解説されていてわかりやすいです。
実務ではBootStrapに頼ることが多いのですが、どういう理屈で動いでいるのかなどはこの本で学んだことが土台になっていると思います。