長さの単位はremやemがよい理由
最近のWebサイトでは、ピクセルではなくremやemを使う事が推奨されている事が多いのですが、その理由についての見解を述べていきたいと思います。
rem・emとは
remは「root em」の略で、「root」とは最高権限や最高の親要素などの意味があります。
CSSの場合は、<html>要素や「:root」で指定されたフォントサイズと思えばいいでしょう。
remは自分で指定する事も可能で、CSSで「html」または「:root」に対し「font-size」を指定する事で自分で設定できます。
これ自体に「em」や「rem」で指定すると無限ループのような状況になると思われるかもしれませんが、デフォルトで16pxが指定されているので問題ありません（まぁ、する人はいないと思いますが）。
「em」は1文字の大きさの事で、アルファベットの「M」の横幅が語源です。
子要素に指定すれば、親要素のフォントサイズを基準とし、1emを等倍として倍率で拡大・縮小します。
emとremの使い方
emは、フォントサイズの大小を制御する際に便利です。
例えばフォントサイズ16pxの文章の一部をフォントサイズ24pxにしたい場合、大きくした文字は1.5倍なので、「font-size: 1.5em;」と指定する事も可能です。
ここでもし親のフォントサイズを変更する事になり32pxにした場合、大きくしたい文字は逆に小さくなってしまいます。
しかし、ここで大きくしたい文字サイズにemで指定する事で、親要素のフォントサイズから算出されるので、拡大したい文字も倍率を維持したまま拡大されます。
余白の大きさや要素の長さなど、ピクセルで指定するのが主流かと思いますが、これらの長さにもremを使用する事が可能です。
「1rem」とすれば1文字分の長さを得られると思えば大丈夫です。
emでもほぼ同じように使えますが、こちらは親要素で指定されたフォントサイズにより変化するため、レイアウトの長さに指定するのなら、remの方が使いやすいでしょう。
ピクセル単位はやめて1文字単位にする
ぶっちゃけ言うと、ピクセルで指定している所を、ほぼremで置き換えてもいいぐらいです。
ピクセルは画素の最小単位で、数ピクセルの差を目視で確認する事は困難です。
しかし、1文字単位であれば、近くの文字の大きさを参考にして、目視でも見当がつくため、扱いやすいです。
ピクセル単位で調整しようとなると、デザインデータから何ピクセルかどうかを、いちいち計りながら入力していく必要があります。とても面倒ですね。
共通要素として、セクション間の下部マージンが48ピクセルと共通指定されてあっても、デザインデータでは、その箇所だけ50ピクセルだったという事もあるでしょう。
そういう場合、デザイナーのミスなのか、じつは意図的にやったものなのか、わからなくなる事もありますし、発見次第いちいち聞くのも面倒でしょう。
スマートフォンではremの方が有利
スマホデザインをするにおいては、ピクセルよりもremの方が有利です。
CSSで「:root」要素に「font-size: 4.3vw;」を指定すれば、大体ちょうどいいサイズ感になるでしょう。
もちろん、メディアクエリで横幅何ピクセル以下での条件は必要ですが、横幅が600ピクセル弱のビューポート設定のスマホも世の中には存在します。
なので、具体的には以下のようにすればいいでしょう。
:root{
font-size: 16px;
}
@media screen and (max-width: 600px){
:root{
font-size: 4.3vw;
}
}これでスマホ（と思われる機種）になった場合に、基礎フォントサイズが4.3vwになります。
「vw」の値は、「ビューポート・ワイズ」の略で、100vwをビューポートの最大幅、つまり100％とした比率です。
4.3vwとしているのは、Google Chromeの検証モードに入っているビューポートのプリセットで、「iPhone SE」の横幅が375ピクセルで、その中での16ピクセルの比率が4.3%だからです。
これならば、どんな機種でも同じ比率の長さが使用でき、さらに小さな値を使いたい場合は0.5remや0.25remのように、小数点数で1未満の値を使えばいいだけです。
スマホではピクセルの方が不定な単位
ピクセル単位でキッチリした仕事を望まれる方もいるかもしれませんが、ハッキリ言いますとスマホではピクセルの方が不定な単位になります。
スマホは機種によって、設定されているビューポートが異なり、横幅360ピクセルから600ピクセル弱の物まで意外と幅広くあります。
あと、スマホにはiPhoneだけでなくAndroidというOSが存在します。全員が全員iPhoneだと思うなよというわけです。
ビューポートの横幅がピクセル単位で異なるという事は、当然ピクセルという単位も機種により異なるという事です。
基本フォントサイズ4.3vwの場合、ほとんどの端末で1行に23文字ぐらい並べられますが、16pxの場合、22文字で改行されたり37文字ぐらい入ったりします。
スマホでピクセルパーフェクトを狙おうとすると、それこそ横幅360～600pxまでの、240パターンのデザインデータが必要になります。
もちろんそんな事は現実的ではないので、多くの場合はChromeの検証モードで行っているでしょうが、それだと横幅375pxのiPhone SEにしか配慮出来ていないという事になります。
重要なのは設定された値ではない
そもそもフォントサイズや余白のサイズに、特定の数値がピクセルとして設定されている必要があるのでしょうか。
そうではなく、フォントサイズなら文字を読めるぐらいの視認性がある事、余白なら文章や流れの一区切りとしての役割をはたしている事が重要です。
文字に何ピクセル設定されているかなど、Web訪問者もGoogleのロボットすらも気にしていません。
1ピクセルの正確さに芸術性を見出しているわけでもありませんし、肝心なのは人間が観たときの視認性です。
Webサイトは、各要素に決められたピクセル数を設定したかどうかで価値が決まるものではありません。
最終的には可読性が重要になります。
意味のない数値指定の考え方など捨てて、1文字単位で調整できる所は、1文字単位で調整すればいいのです。
いまや高解像度ディスプレイが主流になってきているうえに、スマホでは既に1ピクセルが実解像度として扱われていないのですから、そろそろピクセルという単位の認識自体を変えてしまってもいいのではないのかと。
この記事が気に入ったらサポートをしてみませんか？