フォントサイズの単位にremを使ってみる

今までフォントサイズの単位にはpx(ピクセル)を使っていたのですが、今回remという単位を使ってみることにしました。

単位にpxを使う問題点

Photoshopに代表されるグラフィックソフトでWebデザインを行う時によく使われるpx(ピクセル)。ウェブ制作を行うにあたってpxから使い始める人がほとんどでは無いでしょうか。非常に馴染みの深い単位なのですが、問題点が1つあります。それはpxが絶対値であり、サイズ変更に対して弱いという点です。

例えばh1が30px、h2が20px、h3が10pxと指定したとします。これを全体的に20%ずつくらい大きくしたいと考えた場合、h1を36px、h2が24px、h3が12pxといった具合に全ての要素のサイズを計算して指定し直さなければなりません。数が少なければそれ程気にならないかも知れませんが、「あっちのpは◯px、こっちのlistは◯px」などと*数が多くなってくると、修正が大変}です。そのうち「んーまあ14pxくらいでいいだろう！」みたいな感じで何となくサイズ指定してしまう事例が発生してします。僕の場合は少なからずありました（苦笑）

emという単位について

今回使うことにしたのはremなのですが、その前にemという単位について考えたいと思います。emとは「エム」と読み、大文字のMの大きさを基準としたためにそういう名称になった様です。大切なのは、絶対値であるpxに対して、emは相対値であるということ。

例えばh1は3rem、h2は2rem、h3は1remなどとサイズを設定していた場合、仮に1remのサイズが10pxであればh1は30px、h2は20px、h3は10pxとなります。ここから1remのサイズを12pxと変更すれば、h2は36px、h2は24px、h3は12pxと変わります。基準となるサイズに対して相対的に大きさを指定するため、大きさを変えるにあたって各要素のサイズを1つずつ指定をする必要がないということですね。

emの問題点について

emは、基準値を変更することで各要素の表示サイズをまとめて変更することが出来るという観点から、pxに比べて使い勝手が良さそうです。が、emにも問題点があります。それはemは親要素のサイズを基準とするということです。

例えば、1emが16pxとして、あるdivに2remを、その中のh2に1remのfont-sizeを指定したとします。するとdivのフォントは32pxとなり、親要素を基準とすることによって、その中のh2のフォントも32px(=1rem)となってしまいます。

片方は2rem、もう片方は1remと指定しているのにもかかわらずどちらも同じ大きさで表示される訳ですね。慣れている方はこういった特性を上手く使われるのかも知れませんが、慣れないうちは使いこなすのは難しそうです。

emとremの違いについて

ではremとはemに比べて何が違うのでしょうか。違いは「r」が付いているかどうかですが、これは「root」(ルート要素)を表しています。HTMLファイルではルート要素はhtmlタグなので、remはhtmlで指定されたサイズに対して相対的な値を取るということになります。emとremの違いは、その基準に親要素を取るか、HTMLタグを取るか、という点にあります。