remを使って文字のサイズを設定しよう

様々な端末に対応させる為にも簡単な設定をしよう

パソコン、タブレット、スマートフォンと、多様な端末でホームページを閲覧する時代です。
それに合わせて、ホームページもレスポンシブWEBデザインという作り方でどの端末からでも1つのWebサイトを閲覧させて、表示させる画面幅に応じて見やすくしていこうよ。という流れになってだいぶ経ちます。
そんな時代の中で、pxやemを使って文字サイズを固定しておくと、都度文字サイズを変えなければならないので、大変です。

そこで相対的な値として「rem」を使ってみようというお話です。

remは、基準となる文字サイズに対してどの程度大きくする・小さくするという指定を行うものです。
つまり、それぞれの文字サイズ比を保ちながら文字を小さくしたい・・・と思った時は、基準となる文字サイズを変更してあげるだけでいい。という事です。
これで一度文字サイズの大小を付ければ、簡単に調整ができますね。

実際にremを指定する

それではどうやって指定していくのかを見ていきましょう。
remの基準とする文字サイズは「html」で設定します。


「html」に62.5%を付けると、基準となる文字サイズが10pxとなるので大変便利です。
16pxを指定したい場合は1.6remとします。125pxを指定したい場合は12.5remとすれば設定できます。とっても簡単ですね。

ちなみになぜ62.5%で10pxになるかというと、多くのブラウザではデフォルトのフォントサイズが16pxで設定されています。
10pxはというと・・・デフォルトで指定されている16pxで割れば出ますね。
計算すると0.625という値が出てきます。
つまりフォントサイズを「62.5%」と指定すれば10px程度の文字サイズとなるわけですね。

・・・余談ですが、デバイス毎に文字サイズの調整を考えない場合においては、こんな回りくどい事をしなくても、直接10pxと設定してもOKですよ。


そしてbodyにも何やら文字サイズを指定しました。
これはremを使って文字サイズの指定をしなかった時の大きさを指定しています。
どこもかしこもremを使って文字サイズを指定するのは大変なので、「付けなければこのサイズ」とあらかじめ設定しておくと便利です。
この部分には相対値ではなく、pxやemなどの絶対値を設定するのがポイントです。

remとはroot emのこと

remはroot emつまりはルートエム・・・
ルート要素を基準とした大きさを表す単位です。
単位なので、paddingやmarginにも応用が利く、なんとも便利な単位なのです。

htmlにはremの基準となる文字サイズ　bodyにはデフォルトの文字サイズ

remを使う時、基準となる文字サイズが、一体いくつなのかを教えてあげる必要があります。
なのでhtmlに基準となる文字サイズを指定します。

全ての要素にremを使って文字サイズを設定するのは大変（面倒）なので、bodyにはremを使わなかった時に設定される文字サイズを指定します。

これさえできれば、もう簡単！
1度文字サイズを付けてあげたら、必要に応じてhtmlで指定してある62.5%を変えるだけ。
ただそれだけで比率をある程度保ったまま、文字サイズの変更が一括でできちゃいます。
もちろん、bodyに指定したデフォルトの文字サイズは変わらないので、そこは別途指定が必要です。

この時には〇pxで、この時は〇px…と都度付けていた設定が1箇所で済むので、とても簡単になりますね。
ぜひお試しくださいませ。