闇雲なrem信仰に物申す

Nino

2020/03/31 に更新

pxをremに変換するプラグインを使うのが最適解だと思います。(記事最後を参照)

皆さんはCSSでフォントサイズを指定する時、pxですか?emですか?remですか?

僕は px を使ってます。

僕が面倒を見ている人たちの多くは他のスクールやどこかしらの現場を経ている人が多く、彼らは概ね rem が正義と教わり、忠実にそれに従っています。僕もそれが正しいと信じていた時期もありました。

今回は業界に蔓延る rem 信仰について語りたいと思います。

前提として、remが適したシーンもあれば、そうでないシーンもあるので、rem vs px のような切り口では語りません。あくまで「まるでpxの選択肢がないかのようにremが無思考に採用される現状」についての指摘となります。

具体的には「ルートで62.5%で1rem = 10pxとする実装」について物申したいと思います。その前にまずは参考情報です。

そもそもルート62.5%はNGとの意見もあります。詳細は後述。

GAFAはどうなのか?link

GAFAはWebサイトのエキスパートを多数抱えており、サイトの閲覧者、閲覧デバイスも多肢に渡ります。そんな彼らの公式サイトはフォントサイズ指定にrem(ルート=%)を使っているのでしょうか?

一つもありませんでした。Googleのサイトは各所がrem指定ですが、いわゆるルート 62.5%での10px=1rem運用ではなく、ベース(ルート)ではpxが使われています。

あくまで公式ページをピックアップしただけで、彼らのプロダクト全体が必ずしもそういう実装になっているわけではない点にご注意ください。

rem信仰の正体link

まずは以下のStackoverflowをご覧ください。

https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-cssopen_in_new

英文なので要約すると

「CSSでpxとremどっちがいいの?」

という質問に対して

「pxがいい」

という回答が399票獲得し、2位のrem(160票)に対し大差でベストアンサーになっています。回答の要約としては

  • かつてはpx指定だとブラウザで文字サイズが変更できなかった
  • 今のブラウザは文字や画像含めpxでも拡縮できるので問題ない
  • すべてpxで開発されていたら直感的だろう?
  • ブラウザデフォルトの文字サイズ設定は効かなくなるけど、設定する人レアじゃない?

となっています。特に一番はじめの部分がrem信仰の正体であり、

「px指定だとブラウザで文字サイズが変更できない」

というはるか昔の事情がいまだに一人歩きし、さまざまなブログでpxは絶対に禁止として語られています。たとえばCAMPはpx指定ですが、マウスのズームでもブラウザのサイズ変更でも文字が拡大縮小されていることが確認できると思います。つまりこの理由でremを推奨するのは完全に時代遅れの認識であると言えます。

ルートがpx指定だった場合、ブラウザデフォルトの文字サイズ設定が反映されなくなることは事実です。

Safariではデフォルト文字サイズ設定がなくなったので影響を受けません。

文字サイズとpxの正確な関係link

文字サイズにまつわる変更には

  • ブラウザのズーム
  • ブラウザのデフォルト文字サイズ設定
  • OSの拡大(ピンチ、アクセシビリティ設定)

が存在し、ベースサイズがpxだとブラウザデフォルトの文字サイズ変更を無視してしまいます。たとえ各所でremを使っていたとしてもルートでpxが使われていればブラウザのデフォルト文字サイズ設定は効かなくなります。そしてほとんどのサイトがルートでpxを使っています。

px実装で困る人がいるとすれば「ブラウザのデフォルト文字サイズを変更している人」なのですが、大多数のサイトがルートでpxを使う実装になっているため、そのブラウザ設定が形骸化しているのが現状です。前述したGAFAの公式サイトも現状ブラウザデフォルト文字サイズ変更の影響をまったく受けません。

そもそもデフォルトの文字サイズが小さくて困っている方はOS自体の解像度を上げるなどしていることが多く、その場合pxだろうがなんだろうがWebサイトの表示も大きくなるため、そこで本質的な課題は解決されます。

たとえばアクセシビリティへの意識が高いAppleでもpx実装されており、Chromeのデフォルト文字サイズ設定を無視するようになっています。Safariからはデフォルト文字サイズ設定自体がなくなりました。

remが適切なシーンとはlink

ただし、remが適切なシーンもあります。remだとルートの文字サイズを切り替えることで一括で文字サイズを調整することができます。これはpx実装だとできないことです。

でも、そのシーンってある?link

デザイナーと協業してWebサイトやUIを実装したことがあれば、その実装を現実的に発動するシーンがほとんどないことは分かると思います。

見出しや通常文字が等倍で小さくなったり大きくなったりするだけで事足りるデザインというのはなかなかないでしょう。結局はパーツ単位で個別にサイズ調整を行うことになります。であればもうpx実装とやっていることは変わりません。

まとめlink

  • GAFAの公式サイトはpxベース
  • pxだと文字サイズ変更できないは嘘
  • pxだとブラウザデフォルトサイズ設定が無視されるは本当
  • Safariにはデフォルト文字サイズ設定がない
  • Chromeにはデフォルト文字サイズ設定が存在するが、ほとんどのサイトで効かないので意味がない
  • 結局デフォルトいじるレベルで困る人はOS自体の拡大率をあげているので問題ない
  • 画面全体の文字サイズを等倍で変動させてほぼデザイン実装が終わるならremもあり(レア)
  • px統一のほうが直感的に実装できる

その他のメリットとしては、Adobe XDなどのデザインツールからCSSを抽出する機能がありますが、基本pxベースなのでいちいちremに変換する必要がなくなります。また、remにまつわる脳の計算リソースを節約することができます。さらに、1.4remより14pxのほうが2タイプ少なくすみます。チリも積もればなんとやらです。

結局のところlink

  • ルート基準で端末間の文字サイズを一括変更させたいか
  • ブラウザデフォルトの文字サイズ設定機能を尊重したいか
  • pxの直感性や周辺ツールとの互換性を重視したいか

によって判断すべきかと思います。

CAMPでremを見かけたら「なぜremを使うのか?」を聞き、上記の使うべきシーンや実装の直観性をさしおいてもブラウザデフォルト文字サイズ設定を尊重したいという意志が感じられた場合にのみ、remを推奨するようにしています。

なぜremを使うのか正確に理解しない状態で「なんとなくいろんなサイトでremを使うよう言われているから」という場合には上記を説明した上で本人に判断を委ねるようにしています。

CAMPではXXを使うべき。という押しつけは一切しません。大事なのは本人が原理原則を理解した上で納得いく選択をすることだと思っています。

最後にlink

ここまで読まれた方はお気づきだと思いますが、remに「書き方が冗長になる」以外のデメリットはありません。伝えたいことは

  • ブラウザデフォルトの文字サイズ設定を反映させるなら rem
  • 一括で文字サイズ変更したいなら rem
  • 記述の直観性を重視するなら px

という選択が存在するということです。巷のブログや開発現場で、あまりにもpx=悪という言及が目立つので、その点についてもう少し正しい認知を広めたい思いで書きました。

「たとえブラウザデフォルト文字サイズ設定が形骸化していたとしても、それに対応する実装は正義では」

という意見は理解できますが、その意味では多くの現場は既に

「アイコンボタンにarea-labelをつけない」

など、本来すべきアクセシビリティ対策を捨てて実装の効率性を優先するという選択をしています。あるいはLighthouseでアクセシビリティ100を切り捨ててデザインを優先するという選択をしているのではないでしょうか?

ブラウザデフォルトサイズ設定の現状を考えると、そこへの対応はマストではなくベターな対応だと思っているので、それと実装の直観性どちらをとるかの選択の余地はあるというお話でした。

追記link

いろいろ反響をいただいているので以下紹介させていただきます。

(最初当記事でルートがbodyとなっていたので修正しました)

emについての見解link

emを全体で使う実装はほぼ見かけず僕自身試したこともないので言及しませんでしたが、そもそも

「emを使うべきかどうか?」

についてはケースバイケースかと思います。emのネストが死を招く云々は周知の事実だと思うのですが、それをしない前提で、たとえば利用規約やブログのポストなど、特定のスコープを大雑把にレスポンシブ対応させたいシーンで僕はemを使います。

ルート 62.5%は危険説link

これは盲点でした。詳細は下記ご参照ください。

https://qiita.com/akuden/items/24b4ea6caa1b3dc1cccdopen_in_new

何にせよルートに文字サイズを指定するとブラウザデフォルトの文字サイズ設定を邪魔するからルートに文字設定は原則NG。という話ですね。この視点に立つと62.5%運用をする時点でremもアクセシビリティに折り合いをつけている状態なので、ルートによる一括サイズ変更をしないのであればpxでいいよね。という話になるかと思います。(もちろん多少なりともブラウザ文字サイズ設定を反映させるという差異はありますが)

開発都合でユーザービリティを犠牲にすべきでないlink

という意見もいくつか見かけました。(下記ツイートのリプライをご参照ください)

ユーザービリティ大事という点については完全に同意です。その上で、我々はすでに開発コストの観点からAAAや旧ブラウザ対応を切り捨てています。たとえばYouTubeもpx実装ですが、ヘッダーのタブ移動でショートカットを表示するなど、手間をかけてユーザーに寄り添う実装をしています。

あくまでremにまつわる開発コストとユーザーメリットのトレードオフの話で、ユーザー軽視していいという話ではありません。大前提ユーザービリティへの意識は持った方が良いと思います。

そもそもrem開発のコスト高いか?についてlink

62.5%対応であれば大したコストはかからないと思います。14pxを1.4remと書くだけなので。ただ、潔癖にいく場合それができないのでmixinやスニペットで対応する必要があります。あるいはGulpの改造が必要になるかもしれません。たとえば以下の記事でハックの一例が解説されています。

https://ebifry.jp/css/px-or-rem/open_in_new

上記の欠点は現開発メンバー及び後任者にそれ専用のスニペットを導入させる必要があるということです。さもなくば冗長なタイプを強いることになります。そことのトレードオフになると思います。

対応するとしたらlink

僕が完全な対応をするとしたら

「Gulpですべてのpxをremに変換する(ルートの文字サイズ指定なし)」

対応をします。こうすれば属人的スニペットを各メンバーのローカル環境に導入させる必要もなく、pxで直感的に開発できます。具体的にはすべてのfont-sizeのpxをgrepして0.0625倍して置換することになると思います。(14pxが0.875remになる)

調べたところプラグインを見つけたのでこれで良さそうです。

https://www.npmjs.com/package/gulp-px-to-remopen_in_new

Nino

本格的なWebサービス開発を教えています。興味のある方は気軽にご連絡ください。