remを使えばマルチデバイス対応が簡単になる

remとは？

remはCSS3で使えるようになった文字サイズをウインドウの大きさに合わせて調整する機能の一つです。でも実際は、文字サイズだけではなくマージンや要素のサイズにも指定できます。

remは基準とするフォントサイズによって大きさが相対的に変わる単位です。emと違ってremはroot要素、つまりhtml要素のベースフォントの大きさを基準にします。

つまりベースフォントのサイズ=1remという訳です。

なぜ、remが必要なのか？

なぜ、remが必要になるのかというと、ウェブサイトがPCだけではなく、タブレットPCやスマートフォンなど複数の種類のデバイスによって閲覧されるようになってきたからです。

ところが、タブレットPCやスマートフォンは画面サイズがPCのモニタよりも小さいので、そのままではウェブサイトが画面からはみ出てしまいます。これではとても読む気になりません。

そこで、登場したのがremです。remを使うことによって、ベースフォントのサイズを変更するだけで、コンテンツの大きさや幅を画面サイズに合ったものに調整できるのです。

例えば、PCから閲覧した時の大きさを100%とした場合、スマートフォンでは画面サイズが１／３ほどになります。そんな時でも、スマートフォン用のスタイルシートでベースフォントのサイズを33%にすれば、remで指定してある要素のサイズがPC版の33%にまで自動で縮小されるのです。

PC版のスタイルシート

html {
   font-size: 100%;
}

スマートフォン用のスタイルシート

html {
    font-size: 33%;
}

remの計算手順

remの計算手順をまとめておきます。

最初にベースフォントのサイズを確認します。html要素のfont-sizeが100%なら16px。

別の値なら、font-sizeの値☓16pxで算出できます。この算出された値が1remの基準値となります。

そして、必要に応じてpxをremに変換していきます。メインコンテンツの幅が960pxならば、

960px ÷ 16px = 60rem

となり、スタイルシートで

#main {
     width: 60rem;
}

と書けばOKです。

まとめ

remはroot emの略で、emと同じように相対的にサイズを指定することができる。ただし、emが親要素のサイズに依存するのに対し、remはhtml要素のベースフォントのサイズしか影響を受けない。計算するのが楽なのでremを使っていきたい。

執筆者：カニ
我が家の炊飯器は少し変わっています。

ご飯が炊きあがって、「さあ、食べよう」とフタを開けるとチョコレートの匂いがします。
甘い匂いに、食欲を減退させつつ一口目をほお張ると、なんと洗剤の味がします。

そんな炊飯器ですが、よく見ると日本製ではありませんでした。