先日、私にサイトの更新作業が回ってきました。内容は、テキストの変更、サイト内に新しくページを１ページ追加するものだったんですが・・・なんとそのサイト、８割近くの単位がremで管理されていました。
私が新しく追加するページだけ、別の単位で指定するわけにもいかず（サイトの管理上よくないので）仕方なくremで作成することに。
ただ、使ったことがあまりなかったので、うまくいかず。
そのときに、調べたことを備忘録として残しておきます。
私のようにremが使い慣れていない人など・・・
- remってなに？
- remってどうやって使うの？
- pxとの違いは？
って方には、参考になるのではないでしょうか。
remとは
- root meの略称。
- rootとはHTMLのこと。
- remは相対値でサイズを規定する。
- 相対値のもととなるのは、HTMLのフォントサイズ。
と、まとめるとこんな感じです。
ルートフォントサイズ、デフォルトフォントサイズとは。
htmlタグにフォントサイズを指定することが、あまりない。指定したとしても、bodyタグにサイト内の基準になるfont-sizを指定する程度かな。って感じですよね。
remは、htmlタグに設定されたfont-size（ルートフォントサイズ）を参照するので、remでサイトの単位を管理する場合は、htmlにfont-sizeの設定が必要です。
設定しないと、指定したいfont-sizeになりません。というか、指定したいfont-sizeにするのに計算が必要で、めんどうでやってられません。
ただ、もしhtmlタグに設定されていなかったとしても、bodyタグに設定されているfont-size（デフォルトフォントサイズ）を参照してくれるので、最悪bodyに基準となるfont-sizeを指定しておけば、remは機能します。
| 基準となるフォントサイズ | 説明 |
| ルートフォントサイズ | htmlタグに設定されたfont-size |
| デフォルトフォントサイズ | bodyタグに設定されたfont-size |
ややこしい。pxでいいじゃん！って思う。
remの指定の仕方。
指定の方法は、基準となる値を1remとします。
つまり・・・
| 設定した基準となるfont-size | remの指定 |
| font-size: 16px; | 1rem |
| font-size: 18px; | 1rem |
といった感じで、基準となる値がいくつであっても、基準値＝1remということになります。
じゃぁ、16pxが1remなら18pxをしていしたいときは、いくつ？ってなりますよね。
それを解決するために、remを使う場合は、基準になる値も計算しやすい値を設定しておく必要があります。
font-size: 62.5%;をhtmlタグに指定して、remの計算を楽にする。
16pxや18pxを基準値とすると、後々の計算がめんどうなので・・・
予め計算が楽になるように、デフォルトのfont-sizeを指定しておきます。
fot-size:62.5%;を指定して、基準となるfont-sizeを10pxにする。
もし、基準のremのfont-sizeが10pxだったら計算が楽になると思いませんか。
10px = 1rem
15px = 1.5rem
21px = 2.1rem
って感じで、すべて10分の1にすればいいわけです。
じゃぁ、htmlのfont-sizeを10pxに設定すればいいのかというとそうではなくて。
10pxという絶対値にするのではなく、基準となるfont-sizeも相対値で指定してあげる必要があります。
なぜ良くないかというと、ブラウザの設定の影響を受けなくなってしまうからです。
絶対値を指定すると、なにかしらの事情がありブラウザのフォントサイズの設定を変えてる人がいたとしても、pxだと設定の影響を受けず、文字が大きくなりません。
なので、ユーザービリティを考えると相対値で設定しておくのがいい。ということです。
主なブラウザのデフォルトのフォントサイズは、16pxになっているので、16pxを10pxにするために、62.5%を指定してあげるって感じです。
16 * 62.5% = 10
つまり、10pxが基準値になるということです。
remとpxどっちがいいのか。
ここまで、remについての説明と、remの指定方法について書きました。
ここからは、remを使うメリットとデメリットをまとめていこうと思います。
- htmlのフォントサイズを変更すれば、サイト全体のfont-sizeを変更可能。
- レスポンシブ対応が楽になる。
1、2どちらも似たような理由ですが、とりあえず１箇所の値を変えればサイト全体の数値が変更になるのは、大きなメリットかと。
あっちも、こっちもフォントサイズを変えて・・・ってやるよりは、１箇所変えるだけなら、楽だし、CSSの可読性もあがりますよね。
ただ・・・世の中そんなに甘くない！のが現実です。
PCのデザイン30pxで、SPになったら15pxになる。みたく、わかりやすく設定されていればいいですが・・・
そんなことはなくて、規則的に設定されていないことの方が多い気がします。
なので、ここで書いたことはメリットではありますが、実際問題どうかと言われると微妙です。
逆に、デメリットとして上げられるであろう、ユーザービリティについても疑問です。
前述しているかもしれませんが、pxで指定すると、ブラウザの設定の影響を受けず、ユーザーが意図的にfont-sizeを大きくしていても変化しません。
で・す・が！
そもそも、ブラウザの文字サイズの設定ってやってる人どれだけ多いんでしょうか？
私もそうですが、ブラウザの拡大縮小（表示全体）なら使ったことありますが、font-sizeだけ設定から変更するって、やったことありません。
って考えると、pxでもいい気がしてきます。
特にスマホなら、ピンチイン・ピンチアウトで見づらいところを大きくしたり、小さくして全体を表示してみたりしていますよね。
以上、メリット・デメリットを考えてはみましたが、結論は案件によって使い分ける。くらいの意識でいいと思っています。
無理に使おうとしても、逆効果になることもあるので、一概にrem(相対値)がいいとは言えません。
mixinを使った指定をすることで、いつも通りに指定できる。
最後に、どうしても使わなくてはいけない案件にあたった時のために、mixinの書き方を書いて終わろうと思います。
remは、なにがめんどうかって・・・16px = 1.6remこの計算が面倒くさいわけで。
pxで見慣れてて、長時間作業してると、結構「あれ？」ってなるときがありました。
そんな時のために、書き慣れた感じでremを使えるmixinを記録として残しておこうと思います。
@mixin font-size($size: 16) {
font-size: ($size / 10) + rem;
}
p {
@include font-size(18);
}これで、font-sizeが18pxなのが一目でわかります。
もし、案件でどうしてもremを使わなくてはいけなくなった時は、記述ミスを少なくするためにも使っていこうと思います。
font-sizeのところを変更すれば、widthやheightなどにも活用できます。
まとめ
remは、便利な面もありますが、実際問題pxでもいいってことが、調べてみるとわかります。
また、本文内では触れませんでしたが、width,hright,padding,marginなどなど、remで指定できます。
ただ、それは結構危険なので、やめた方がいいです。（私のようにサイト全体がremなら仕方ないですが）
理由は、前述したブラウザの設定が関係してきます。
確かに設定している人が少ないであろう「ブラウザごとのフォントサイズの設定」ですが、もし設定している人がいたとして、それがwidth,hright,padding,marginなどをremで設定しているサイトを訪れたとしたら、すべてのデザインが崩れます。
なので、remを使うときは十分考えて使用するようにしましょう。