「CSSのfont-sizeプロパティの単位には何を使うべきか」という話に思うところがあったので、現時点の私の見解を書いておきます。
まずひとこと言いたいです。
この件に関しては、「論争」も「闇雲な信仰」も起きていません。
「記事を書いた人たちの周辺ではそう見えた」のかもしれませんが、技術者それぞれが考えるべき議題に、煽るような表現を使うことには良い気がしないです。これから学ぶ人が、細かい理由を知る前に萎縮してしまいます。
昨年末からTwitterを周辺に広がっている「コーダーとプログラマの呪い合い」も、根底にはそれがあると思っています。
ということで本題に入ります。
基本的な考え方
「どちらでも構わないので、プロジェクトがスムーズに進む選択をする」と考えています。
- メイン開発者が自分自身である場合は、remを使う
- 共同開発で、メイン開発者がpxを使用していれば従う
- emの方が有用な場合はemを使う（後述）
pxでもremでもよいとする理由については、冒頭のNinoさんの記事のとおりです。
https://to.camp/lesson?v=syr7IVIVoL7ZIoPVuHps
完全なアクセシビリティを考えるのであればremが良いのでしょうが、ブラウザの文字サイズ設定は形骸化してしまっています。「文字サイズだけ大きくなっても困る」のが現実です（文字サイズ変更ボタンがアクセシビリティ対応とは言い難い、とされる理由です）。
remを優先している理由
正直なところ「公開プロダクトでremを使わざるを得ないため（後述）、慣れているから」でしかありません。
メリットがあるとすれば、公開後のサイト改修のときです。以下のような依頼が来ることがよくあります。
「ページAのサイドバーにある誘導パーツを、そのままページBの本文枠内にも表示してください。細かい見た目調整はおまかせします」
この場合、すでに作成している誘導パーツ＝モジュールのサイズ違いを作ることになります。
pxで指定していた場合、すべての要素に修正が発生しますが、remであればモジュールを包括しているdivに文字サイズを指定するだけで済む場合があります。
ただ、結局pxで指定している余白を直したり、ジャンプ率を上げるために見出しを更に大きくしたりするので、remが特別便利かと言われると悩ましいです。
emを使用するケース
まれにですが、remではなくemを使用するケースがあります。
- 文字サイズの大きさをインラインで変更する調整用クラス
- CSSで擬似的に作成したインターフェース
- ボタン等のラベルに付与されているアイコン
これらはHTMLの文字サイズではなく「現在の要素の文字サイズ」に追随した方がよいと考えているからです。
なぜ多くの人がremを使うのか
「学習した、もしくは、最初の会社で採用していたCSSフレームワークの文字サイズがremだったから」という単純な理由ではと思います。
主要なCSSフレームワークの文字サイズの単位は、ほぼremです。
HTML・CSSの初心者向け集中講座の講師を、何度かしました。その際には
「文字サイズにはremを使ってください。よくわからない場合はpxにしても構いません」
と教えています。
これはこだわりでもなんでもなく、remを教えていないと即戦力にならないからです。
たとえ制作会社であっても、完璧なCSSを書けるコーダーばかりではありません。その後、現在の環境ではpxを使用しても何ら問題ないとわかっても、すでにそのCSSフレームワークにお世話になりすぎているので、よほどコーディングスキルが高くならない限り、CSSを根本から見直そうとはしないのでしょう。そういう意味では「rem信仰」と言えなくもありません。
GAFAはpxを使用しているのに
Googleが開発した、Material Components Webもremを使用しています。自社サービスはpxなのに、です。
これは何ら矛盾ではなく、CSSの利用目的が異なるからです。
CMSテーマやCSSフレームワークを作るとわかってきますが、どのくらいのレベルの技術者が、どのような使い方をするか予想できない公開プロダクトの場合、pxのような固定値を使うことが難しいです。スマートフォンでの文字サイズを小さくしたいとhtmlのフォントサイズを14pxにしたとしても、フレームワーク側の単位がremであれば、簡単に画面全体が追随してくれます。利用者は大助かりでしょう。
一方で自社サービスでpxを使用しているのは、はっきりした目的を持ったサイトを高い知識を持ったデザイナーとともに制作しているので、意思統一のしやすさを優先しているのではないでしょうか。
まあ、単にコーダーが違う人だから、かもしれませんが…
まとめ
この記事を書きながらも「本当にremを使い続けていいのか？」と悩んだりして、ずいぶん時間がかかりました。考える機会をいただきありがとうございます。
10年以上前は、そもそもremが使えなかったことを考えると、隔世の感があります。
私の結論としては、今後も基本方針通り、個人の制作ではremを使うつもりです。ですが、えびさんの記事の通り、remは作業効率が明らかに悪いので、環境を改善する必要がありそうです。
えびさん、function使わせていただきます。
なるほど！@function fz($size) {
@return ($size / 16) + rem;
}
で
font-size: fz(12);
とかにすれば良い感じですね！— えび?@札幌XD (@pino_ebiebi) December 29, 2019
ブラウザ側の制約がなくなった今、単位ひとつをとっても
- 自身が今関わっているプロジェクトにはどれが最適か
- 今当たり前のようにやっている手法は正しいのか
をきちんと考えていきたいです。
余談ですが、単位のうち「pt = ポイント」はウェブ制作で使用するのは難しいと考えています。
MDNの解像度のページにも記載されていますが、環境によって72dpiになるか96dpiになるかが不定なので、pt以外の単位を使用している要素とのズレが出てきてしまいます。
完璧な印刷用スタイルシートを作る際に「10.5pt」を使用するかもしれませんが…