font-size:62.5%とrem設定

フォントサイズ HTML&CSS

ぽんきち

友人とWEBサイトを作っていたらそこのfont-sizeは1.6remで設定しろと言われたよ。

勉強中
プログラマーさん

ああブラウザの標準サイズだね。
CSSでhtml{font-size:62.5%}って設定してあるんじゃないかい?

ぽんきち

設定してある。。。何これ?なんでピクセルじゃいけないの?1.6remってにゃんにゃんだ!

勉強中
プログラマーさん

落ち着いて!笑
ひとつずつ見ていこうか。

font-sizeの設定について

html { font-size:62.5% } とは

友人とチーム開発をしていて。サイトの模写をしていて。案件の改修にぶち込まれて。など、様々な場面で

 html { font-size: 62.5%; }

という記述を目にしたことがあると思います。


結論から言いますと、これは「ブラウザフォントサイズを10pxに設定するよ!」と言う意味になります。

なぜなら

  • 元々のブラウザ標準フォントサイズは16pxが主流。
  • 16pxの62.5%は10px。

なんでわざわざ10pxにするの?小さくしたいの?と思いますよね。

でもとりあえずは「ブラウザの標準フォントサイズを10pxにしている。」と認識しておけばOKです。
(というかそれが全部)

これは設定しなくてもWEBサイトは作れます。でも設定しておくとちょっぴり制作がしやすくなります。
なのでとりあえずデフォルトで記述しておけばOKです。

ちなみにブラウザのフォントサイズは一生変わらないの!?という不安が湧いてくる方もいるかもしれませんが、”互換性”という言葉が存在するように、大多数のユーザーが存在する世界ではVerUpに関わる似たような不安はこれまでも様々な手立てで解消されているので、一旦気にしなくても良いかなと思っています。(※あくまで自分の一意見です。)

結論

html { font-size:62.5% } は標準フォントサイズを10pxにしている。

remの設定について

html { font-size:62.5% } を設定した場合、1remはいくつになるでしょうか?

remは標準フォントサイズからみて等倍ですので、1rem = 10px になります。


では html { font-size:62.5% } を設定しなかった時の1remはいくつになるでしょうか?

元々のブラウザ標準サイズは16pxなので、1rem = 16px になります。

ぽんきち

2remだったら32pxってことでしょ?これだからremはわかりづらいにゃ。。。

勉強中
プログラマーさん

そそ!
でも1rem = 10px だったら?

ぽんきち

2remで20px。。
じゃあ1.6remは16pxってこと?

勉強中
プログラマーさん

大正解!!元のブラウザの標準サイズだね。

このようにhtml { font-size: 62.5% } でブラウザの標準フォントサイズを10pxに落としておくと、remを直感的に設定できるようになります。12pxにしたかったら1.2rem。32pxにしたかったら3.2remという感じですね。

ぽんきち

でも16pxを設定したいなら16pxでいいじゃないかだにゃ。
なんでそうまでしてremを使わせるのにゃ?

勉強中
プログラマーさん

ユーザーがブラウザの設定で文字サイズを大きくしたらどうなると思う?

ぽんきち

16px(ピクセル)だと。。。変わらない?

勉強中
プログラマーさん

そゆこと!remで設定しておくとユーザーがブラウザの文字サイズを変更した時に反映される。ってことだね。


pxは絶対指定になります。なので、ユーザーがブラウザの設定をいくら変更したとしても変わりません。
それに対してremは相対指定になります。ユーザーがブラウザの設定を変更した場合、等倍で反映されるので、ユーザーの希望通りのサイズになってくれます。

結論

remで指定すると、サイズが相対指定になるのでユーザーがブラウザの文字サイズを変更した時、キチンと反映される。逆にpxは絶対指定なので反映されない。

pxとremどっちで設定する?

ぽんきち

そういうことかにゃ。じゃあpxで指定するのは間違いだったにゃ。全部remに変えるにゃ。

勉強中
プログラマーさん

それがそうでもないんだな。
pxでの設定が適している時もあるんだよ?

ぽんきち

え〜。。。

これ以上はパニックにゃ。。。

勉強中
プログラマーさん

後少しだからがんばって笑

結論から言いますと「可変になって欲しくない要素はpx指定しよう!」というものです。

まず、ブラウザの文字サイズを拡大したら、そのまま文字が大きくなって見やすくなるでしょうか??
答えはNOです。もしそうだったら最初から文字を大きく設定しているはずです。

なぜそうしないのかというと、フォントサイズは全体のレイアウトを見て、その場所に適したサイズを適用しているからです。

タイトルは大きく。文章は標準。注釈は小さめ。等。。。

なので、作り手が想定していないサイズに変更された場合、まずレイアウトは崩れるでしょう。
そうするとユーザーにとって「この文字は見やすくなったけど、こっちはレイアウトが崩れて見づらいな。。。」という現象が起きます。

それはしょうがないことでもあるのですが、なるべく回避するためには「これは大きくなると困るな」という要素にはpxで指定しておくのが無難です。

目安としては下記を基準にするといいかも知れません。

  • 文章として読んでほしいものはrem。
  • イメージとして捉えてほしい。もしくは、サイズが変わるとレイアウトが大きく崩れるものはpx。


結論

可変になって欲しくない要素はpx指定しよう!

まとめ

ぽんきち

なんとなく分かった気がするにゃ。

勉強中
プログラマーさん

それなら良かった。
拡大&縮小じゃなくてブラウザの文字サイズを変える人はそこまで多くないと思うから、チームで決まりがなければある程度の目安で捉えてもいいと思うよ。

ぽんきち

分かったにゃ!
ピクセルを使った方が良さそうなところは友達と相談してみるにゃ!

勉強中
プログラマーさん

うんうん。そうするよ良いよ。

結論まとめ

  • html { font-size:62.5% } は標準フォントサイズを10pxにしている。
  • remで指定すると、サイズが相対指定になるのでユーザーがブラウザの文字サイズを変更した時、キチンと反映される。逆にpxは絶対指定なので反映されない。
  • 可変になって欲しくない要素はpx指定しよう!

でした。

remとpx指定について、他にこんな目線があるよ。という方いらっしゃればご意見いただけると嬉しいです。

コメント

タイトルとURLをコピーしました