Blog

ブログ

CSSのフォントサイズの単位問題について考える

「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使わせていただきます。

ブラウザ側の制約がなくなった今、単位ひとつをとっても

  • 自身が今関わっているプロジェクトにはどれが最適か
  • 今当たり前のようにやっている手法は正しいのか

をきちんと考えていきたいです。


余談ですが、単位のうち「pt = ポイント」はウェブ制作で使用するのは難しいと考えています。

MDNの解像度のページにも記載されていますが、環境によって72dpiになるか96dpiになるかが不定なので、pt以外の単位を使用している要素とのズレが出てきてしまいます。

完璧な印刷用スタイルシートを作る際に「10.5pt」を使用するかもしれませんが…