remの基準値の設定と使い方。結局pxの指定とどっちがいいのか。

先日、私にサイトの更新作業が回ってきました。内容は、テキストの変更、サイト内に新しくページを１ページ追加するものだったんですが・・・なんとそのサイト、８割近くの単位が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は機能します。

ややこしい。pxでいいじゃん！って思う。

remの指定の仕方。

指定の方法は、基準となる値を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を使うメリットとデメリットをまとめていこうと思います。

1. htmlのフォントサイズを変更すれば、サイト全体のfont-sizeを変更可能。
2. レスポンシブ対応が楽になる。

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を使うときは十分考えて使用するようにしましょう。

サイト全体に適用させる必要があるときはノーマライズCSSへ記述する。

どうしてもremを使ってサイト全体を作成しなくてはならなくなったときは、htmlタグへの記述をなるため、ノーマライズCSS（リセットCSS）へ記述するようにしましょう。

調整するときも、ノーマライズCSSの一箇所を修正すれば、全体が調整されるため、工数削減につながります！

ノーマライズCSSの作り方がわからないなど、お困りの方は、下記の記事を参考にしてみてください。

関連記事

【コピペOK/サンプルあり】リセットCSSとノーマラズCSSの書き方。

私が勤務する会社でコーディングのルールを決めることになりました。 ルールの中でリセットCSSはなにを使用するか。という議題になったので、私が調べた内容と、結論を記録しておこうと思います。 最後には、私が使っているノーマライズC[…]

【2024/07/22更新】総合的に見ると「px」を使う方がよさそう。

先般、社内でコーディングルールを決めることとなり、remかpxを使うか問題が発生しました。その時に調べたことを追記として記述しておきます。

結論：pxを使用する。

まず、結論としては社内では「px」を使用して制作にあたることになりそうです。

それぞれ、以下に解説していきます。

理由：html{font-size: 62.5%;}の記述がよくない。

主な要因は、タイトルにもあるように、以下の記述にあります。

html {
 font-size: 62.5%;
}

何がそんなによくないかというと・・・

• プラグインがhtml{font-size: 100%;}を前提で作られていることが多いから。

です。

プラグインというのは、JavaScriptだけでなく、WordPressなどのCMSも含まれます。ブラウザの基準フォントサイズが設定されていることもあり、プラグインはブラウザの基準の値を取得して、表示のサイズを設定するようにされているものがあるようです。

そのため、その基準値となる値が変更になってしまうと、プラグインを入れたことによって、表示崩れが発生してしまいます。

また、今使っているプラグインが、今は影響していなくても、将来的に更新がかかったさいには急に表示が崩れる可能性もあります。更新については、事前に防ぐとことができないため、無理してremを使うよりもpxを使用しておくほうが無難です。

font-sizeは、rem。余白は、pxと使い分けることも検討したが断念。

前述したようにプラグインがらみで断念したのですが、一時的には使い分けるということも検討しました。

というのも、remに全くメリットがないわけではないからです。

remを使えば、レスポンシブの調整が容易になり、制作時間を短縮することが可能になります。

以下のような感じです。

html {
  font-size: 62.5%;
}

@media screen and (min-width:768px) {
  html {
    font-size: 75%;
  }
}
}

上記のように設定をすれば、remで指定した箇所は、個別にしなくても一気にサイズ変更が可能になり、時間削減になります。

が、本記事の上部でも触れたように、pc表示とスマホ表示の間で規則的な値が設定されていれば。の話です。

私も経験がありますが、スマホはスマホの設定になっていることが多いです。個別に設定されているとなると、結局pxと同じ手間が発生します。

会社やチームでデザインコーディングをおこなっているのなら、デザインの作成のルールを設定すればいいのですが、デザインの柔軟性もなくなってしまうため、このようなルールを設けてしまうのは良くないでしょう。

以上のことから、使い分けのメリットを感じられないため却下です。

pxとremのメリットとデメリット。

少し順序がずれましたが、pxとremのメリットデメリットを記述しておこうと思います。

pxのメリット

1. 値が見やすい。直感的に理解できる。
2. 知見がなくても扱える。
3. 外的要因でレイアウトが崩れることがない。
4. ユーザーの環境に左右されない。

以上、pxのメリットです。

初学者からベテランまで共通して理解できる点や、更新のときに担当者が変わっても更新しやすいですね。remだと、基準値を確認してからでないといけないので、少々面倒です。

pxのデメリット

1. レスポンシブの時に手間がかかる。

レスポンシブのときは、個別に調整が必要です。

remのメリット

1. レスポンシブ対応のときに手間がかからない。

「レスポンシブ対応のときに手間がかからない。」は、デザインの値がpcからスマホになったときに、統一（規則的に）なっている必要があります。そうでなければ、remでも個別の設定が必要です。

remのデメリット

1. 直感的には理解できない。
2. プラグイン導入時に不具合を起こす可能性がある。

やはり、プラグインで不具合を起こすかもしれないリスクは避けたいとこです。プラグインを導入した時は良くても、更新した際に不具合が起きる可能性がある点も念頭においておきましょう。

どうしてもremを使わざるおえない時の対策。

更新のときや、強度開発（制作）をしているときなど、プロジェクトによってはremが使われているときがあるかと思います。

どうしてもremを使わなくてはいけないときのことを想定して、念の為の対策を考えてきました。

デフォルトの値は変更せずに個別に値を設定する。

remを使用する上でなにが一番よくないかというと、はやりプラグインがらみでしょう。

プラグインがらみの不具合を防ぐためには、ブラウザの基準値を変更しないようにするしかありません。

つまり、以下のような状態でremを使用するということです。

html {
 font-size: 100%;
}

font-size: 100%;　＝　16px（ブラウザによる）となるため、計算はかなり面倒ですが、この状態でremを使用すればプラグインがらみで不具合を起こすことはありません。

あとは、計算をしてくれるように事前に変数を作っておくか、Scssのmixinやfunctionを活用して計算を省いておけば、面倒な計算も省けます。

CSSで対応する場合は、以下のコードを参考にしてください。

:root {
    --root-font-size: 16;
}

p {
    font-size: calc( 13 / var(--root-font-size) * 1rem );
}

Scssの場合は、以下の通りです。

@function rem($px:16) {
  @return ($px / 16) * 1rem;
}

@mixin font-size($px:16) {
  font-size: $px / 16 * 1rem;
}

フォントサイズも余白もpxで指定する。相対値の指定は必要な箇所のみにする。

基本は、pxで値を設定します。pxだと、ウインドウ幅や高さでどうしてもデザインが崩れてしまうときは、以下の単位を参考にして、設定してみましょう。

以下、使えそうな単位を記述しておきます。