rem を上手く使いたい

単位ってむつかしいねエヘヘ、みたいな頭空っぽな記事を書いたんですが、その後いろいろ見ていくなかで、今後の指針というか、これはこうしよう!みたいなのがなんとなく決まったので、覚え書き。すぐ忘れちゃうからね。もちろんこれが正しいとかではなくて、あくまで自分がしばらくの間はこういうルールでやろう、っていうだけです。

まず、px はあんまり使わない。レスポンシブ対応が面倒だし、フォントに使ってしまうと、ブラウザによって表示サイズに差があるみたいなので。使うのは、レスポンシブに対応させる前段階の、大きな画面で見るときくらいですかね。全体的な幅を決めるサイズとか、設置する画像のサイズとか。やっぱりビシッとイメージ通りにレイアウトを決めるときは、px の方が使いやすいし、使っても問題ないんじゃないかな、と思います。

ある程度ディスプレイサイズが小さくなったら、レスポンシブ対応が必要になります。そうなったら、もう px は使わず、要素のサイズは % 、フォントは rem を使います。vh とか vw あたりの、Viewport を使う系の単位が良さそうな気がしますが、古いアンドロイドとかは対応してないらしいので、なるべく互換性のあるものを使っていきます。便利だと思うんですけどね。いずれは、Viewport を使うのが主流になるんじゃないでしょうか。あまりに少数派なものは切り捨てる感じで。IE のように。

まず % ですが、これは割と感覚的に使いやすい気がします。注意するのは、画面のサイズではなくて、親要素のサイズとの比較でサイズが決まる点ですね。そこだけわかっていれば、便利に使えると思います。ある程度はレスポンシブ対応してくれるし、良いやつですね。仲良くしましょう。

続いて rem ですが、これがなにかというと、「大元で設定されたサイズを基準にして算出される、相対的な単位」です。何言ってるかちょっとわからないですね。html で指定されている font-size を基準にして、rem で倍率を指定する、みたいな感じ。ちょっとわからないですね。例えば、 html {} で font-size を 10px に指定して、1rem と書いたら、実際には 10px で表示されたり、 1.5rem だったら15px で表示されたり、2rem だったら 20px で表示されたり、そんな感じ。多分。多分合ってる。

相対的なので、レスポンシブ対応が必須な今だと、フォントに使う単位としてはおすすめみたいです。例えばレスポンシブ対応が必要なときに、@media に記述をしますが、 font-size を指定したところをそれぞれ調整する必要がなく、html {} で font-size を変更してあげるだけで、rem で書いたところがいっぺんに変わってらくちん、らくちん。みたいな。正直まだあんまり使っていないので、そんなにうまいことバランスとれるのかな?っていう気持ちがあったりなかったり。逆に言うと、うまくバランスがとれる数字で最初から設定できれば、レスポンシブ対応時にすごく楽ってことですね。

ちなみにブラウザの、デフォルトで決められている font-size は16px (が多数?)らしいので、rem で設定しやすいように html { font-size: 62.5%; } って書いて、10px を基準にしたりするらしいです。これ、 font-size: 10px; じゃダメなんですかね?やっぱりブラウザごとでずれちゃうのかな。% で指定するとずれなくなるんでしょうか。不思議。

レスポンシブサイトの『font-size』を『rem』で指定するベストな書き方 | B-side Journal
  デスクトップパソコン、タブレット、スマホなど、 画面サイズや解像度が全く違うデバイスを使う現代では、サイトの文字サイズをpxで固定する事はデメリットしかありません。 全ての要素に対して、デバイスごとに最適な …

こちらを参考に、html と body には最初からこれを設定した方がよさそうですね。rem を使っていくぞ!という決意の表れとして、元になる style.css に記載しておこうと思います。もう作っちゃったwebサイトも変更したいけど、そんなことしてたらきりがないんだろうなあ。先に WordPress のテーマ作ろう。新しいwebサイトも作ろう。いずれ気が向いたら、作り直そう。そのいずれが来るように、いろいろやっていこう。関係ないけどレムって名前みたいでかわいいですね。アニメ脳。頭空っぽ。

かしこ

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