Hatena::ブログ(Diary)

IT-Walker on hatena このページをアンテナに追加 RSSフィード

2012-03-23

これは使える!rem (root em) 単位を使用したフォントサイズの指定

寡聞につき、rem(root em)なんてフォントサイズの単位があるのを今まで知りませんでした。

ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。


rem (root em) というのは、「ルート要素(典型的にはhtml要素)に対する相対的なフォントサイズの単位」です。

従来のemは、親要素に対して相対的なフォントサイズの単位でした。そのため、要素の出現位置次第でフォントサイズが変わってしまうことも多く、使いにくい場面も多々ありました。


他にもフォントサイズの指定方法には、ピクセル(px)を用いたものがあります。が、特に今は様々なスクリーンサイズを意識しなくてはならない時代。スクリーンサイズの小さいデバイスでは全体的なフォントサイズを同時に大きくしなければならないこともよくありますが、pxを使用していると、メディアクエリなどを使ってあらゆるフォントサイズ指定をやり直さなくてはならなくなります。ピクセル指定は時代遅れといってもいいかも知れません。


そこでremの出番です。

remは、ルート要素(典型的にはhtml要素)に対して相対的なフォントサイズ指定となるので、要素の出現位置に依らず、一定のフォントサイズが期待できます。

そしてこちらによれば、remはIE9を含むモダンブラウザの全てで利用できるので、実はすでに広く使えるテクニックです。


例えば以下のCSSを使用すると、small要素のフォントサイズは常に11px、strong要素のフォントサイズは常に18pxとなります。

html { font-size: 10px; }
small { font-size: 1.1rem; }
strong { font-size: 1.8rem; }

html要素でfont-sizeを10pxに指定しているのはポイントとなるテクニックの一つ。こうしておくと1rem=10pxとなり、あとは1.1remは11px、1.6remは16pxなど、remとピクセルの対応関係が非常にわかりやすくなります。


さらに、今回参考にした記事では、html要素のフォントサイズ指定を以下のように行なっています。多くのブラウザで、デフォルトフォントサイズは16pxですが、そのサイズに対して62.5%とするとちょうど10pxという値が得られます(16*0.625=10)。こうしておくと、ユーザの環境に応じて常に最適なベースフォントのサイズが得られます(例えばうちの母なんかは老眼で、ベースのフォントサイズを大きくしてブラウジングしています)。

html { font-size: 62.5%; }
small { font-size: 1.1rem; }
strong { font-size: 1.8rem; }

ただ、remはIE8以前では利用できません。こうしたブラウザをサポートすることも考えると、以下のような指定を行うことで、古いブラウザであってもピクセル指定時と同程度のアクセシビリティが得られます。

html { font-size: 62.5%; }
small { font-size: 11px; font-size: 1.1rem; }
strong { font-size: 18px; font-size: 1.8rem; }

というわけで、とても有益そうなremのご紹介でした。

参考文献:

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

リンク元