フォントサイズ指定の相対単位remを使う

rem

レスポンシブデザインの普及により、フォントサイズ指定にpx(ピクセル)ではなく、相対単位のemが使われるようになってきました。

emとは、親要素に対しての相対的なサイズです。

親要素が変わると基準も変わるので、CSS指定も複雑になり頭がごちゃごちゃしてきたりします。

その結果、思ったとおりのサイズになってなくて計算し直したりということも・・

emの指定方法を参考までに書いておくと、
[css]html{
  //ベースフォントサイズ
font-size: 16px;
}

h1{
  //30pxをemにする場合。
  //ベースフォントサイズが16pxなので、30 / 16 = 1.875。
font-size: 1.875em;

//さらに、line-heightに60pxをemで設定する場合。
//今のフォントサイズが30pxなので、60 / 30 = 2。
line-height: 2em;
}[/css]
こんな感じで基準が変わるので、少し面倒です。

計算に関しては変換ツールがあるので、お任せしてしまえば簡単なんですが。
[block]pxとemの変換ツール → http://pxtoem.com/[/block]

でも、ちょっと面倒なemに変わるものとしてCSS3ではremが使えるようになりました!

rem(root em)つまり、常にrootを基準とするのでemのように基準がコロコロと変わることがありません。

上のemでの指定をremに変えてみるとこんな風になります。
[css]html{
  //ベースフォントサイズ
font-size: 16px;
}

h1{
  //30pxをremにする場合。
  //ベースフォントサイズが16pxなので、30 / 16 = 1.875。
font-size: 1.875rem;

//さらに、line-heightに60pxをremで設定する場合。
//ベースフォントサイズを基準にして、60 / 16 = 3.75。
line-height: 3.75rem;
}[/css]
このように、常にベースフォントサイズを基準とします。これなら頭がゴチャゴチャになりません!

ただ、CSS3なのでIE8以下などの古いブラウザでは全てベースフォントサイズになってしまいます。そのため、IE対応としてpx表示も必要となります。

実際に使用する場合は、ベースフォントサイズを10pxに設定することで、簡単に計算できるようにすると便利です。

こんな感じです。
[css]html {
font-size: 62.5%;
}
h1 {
//IE対応
font-size: 35px;
font-size: 3.5rem;
}[/css]
でも、もう一つ問題が・・。

IE対応のpx表示を忘れてしまうんですよね、しばしば。

私はsassを使っているので、rem変換のmixinを作ることでIE対応漏れがないようにしています。

さらに、このmixinを使えばベースフォントサイズを10pxにしなくても、mixinの$baseに指定したいフォントサイズを設定すれば簡単に計算できます。
[css]@mixin fontsize($size: 24, $base: 10) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}

h1 {
  //引数にフォントサイズをpxで指定する
@include fontsize(35);
}[/css]
remのおかげでかなり楽になった!けど、できれば計算すらしたくない!

と思ったので、次回からはCompassのVertical Rhythmを使ってさらに楽をすることにしました。

Sass&Compassの組み合わせはかなりおすすめです。

次回はSassの使い方を記事にしてみようと思います。