はじめに
3年ほど前でしょうか、一時期いたるところで持ち上げられていたCSSのフォントサイズ単位「rem」。
ですが、モダンブラウザ全盛の今でも有用に使われているシーンは少ないように思えます。（使っているサイトが少ないという意味ではありません）
何故そう思ったか個人的な見解をつらつら書いていこうと思います。
remとは
ルート要素（html要素）のフォントサイズを基準に相対的なフォントサイズを指定するための単位。
html {
font-size:10px;
}
p {
/* フォントサイズ 12px (10 * 1.2) */
font-size:1.2rem;
}
何故有用な形で使われていると思えないのか
仕事柄いろいろなサイトのCSSを覗くことが多いですが「rem」を使っているサイトの大半が「px」指定と大差ない使い方をしている印象です。
なぜ、そう思うのか理由は一つです。
「ルートのサイズを参照している意味がない」
私が最初に「rem」で期待したのは、レスポンシブサイトの設定工数削減でした。
ルートの相対サイズを設定するという特性上、ルートの文字サイズを変更すれば各デバイスの文字サイズを再指定することなくスマートに設定でき、実装の工数が削減できるのではないかということです。
html {
font-size:14px;
}
.title {
/* フォントサイズ 28px */
font-size:2rem;
}
@media (max-width: 640px) {
html {
font-size:12px;
}
.title {
/* フォントサイズ 24px */
}
}
しかし現実はそうではありませんでした。
多くのレスポンシブサイトのフォントサイズは
ルートの文字サイズ比率 ≠ 要素ごとの文字サイズ比率
なのではないでしょうか。
どういうことかというと、以下のような設定の場合です。
| 要素 | PC | SP | 比率 |
|---|---|---|---|
| ルート | 14px | 12px | 7:6 |
| 記事タイトル | 40px | 20px | 2:1 |
ルートのフォントサイズはPCが14px、SPが12pxに設定されていたとします。
この場合、ルートのフォントサイズ比率はおおよそ7:6になります。
しかし、PCではタイトルのフォントサイズが40px、SPでは20pxでデザインされていたとします。
このタイトルのフォントサイズ比率は2:1となります。
このような場合、SPタイトルはPCの設定のままではデザイン通りのフォントサイズにはならず、結局SP用に再設定する必要が出てきます。
そうなると今度は逆にSPのルート設定12pxに対して新しく相対サイズを計算し設定する必要が出てきます。
単体ではそうでもない労力ですがサイトの要素全てとなると、よっぽどスタイルガイドが定まっているサイトでない限りかなり厳しい印象です。
html {
font-size:14px;
}
.title {
font-size:2.85rem;
}
@media (max-width: 640px) {
html {
font-size:12px;
}
.title {
font-size:1.67rem;
}
}
こういった事を避けるため、ルートのフォントサイズをデバイス関係なく10pxに固定しているサイトも多く見られます。
10pxにすることで相対サイズの計算が容易になるので、こういった措置をとっているのでしょう。
しかし、こうなってしまうとルートのサイズを参照している意味が薄れてしまうので「rem」である必要はありません。
もちろん、要素ごとの文字サイズ比率をルートの文字サイズ比率と同一にすればこの問題点はクリアできますが、見栄え上あまり現実的であるとは思えませんし、そういったサイトも見たことがありません。
では有用なシーンとは
さて、ここまで聞いていると「rem」は不要にも見えますが有用なシーンは無いわけではありません。
私が「rem」を有用的に用いられると考えているのは**「ユーザーがフォントサイズを変えられるサイト」**です。
昔のサイトでよく見たような文字サイズ大・中・小の切り替えスイッチがあるようなサイトですね。
過去のサイトではフォントサイズ切り替え機能は「rem」のような相対参照型のサイズ指定「em」や「%」を使いルートのフォントサイズを変化させることで実装している例が多いと思います。
しかし「em」や「%」は親要素の設定とも相対的な設定を行ってしまうため設計や保守が難しくなる面がありました。
その反面「rem」はルートのみを参照するため設定が複雑になりにくく、以前に比べ設計や保守が容易になりますので、有用に用いることが出来ると考えられます。
まとめ
色々と便利そうなフォントサイズ設定はありますが、実務ではpx指定が一番安牌であるという所感です。
実数値で分かりやすい点、他のサイズ設定に影響されない点など小規模なサイトを組むレベルであればこちらのほうが非常に分かりやすいです。
SASSを使えば変数でフォントサイズを管理可能ですし、ルートサイズを参照して一括で管理する旨味を活かせる場面は少ない印象でした。
結局この記事で何が言いたかったのかと言うと、新しい技術や設定に惑わされず必要に応じて最適な設定を選択しようということです。
古い技術やノウハウが役に立つ場面で新しい技術ばかり使おうとして逆に遠回りしている、なんてこともざらにあります。
CSSだけに限らずHTMLやjsでも頭を柔らかくして設計や構築を行っていきたいものです。
いやいや、もっと有用な場面あるよ！といった例があれば後学のためにも是非コメントいただけると幸いです。
走り書き的な内容でしたが最後まで読んでいただきありがとうございます。