2020/07/20

【CSS】pxとremどちらを使うか問題に対して感じたこと

こんにちは！CSSのremを見るとデスノートのレムを思い出すMizutani(@sirycity)です。

今回はCSSのfont-sizeの単位としてpxを使うかremを使うか問題に対して私が感じたことや私自身がどうしているかについて書いていきます！

※pxとremの性質的な違いについては触れません。

参考ページ

2020年初頭ごろに起こった以下の議論、および関連するページを参照しています。

ちょっとこの記事を読んで、久しぶりにCSSの話を。
まず前提として、記事を批判する意図はなく、記事中で語られている「大事なのは本人が原理原則を理解した上で納得いく選択をすること」には完全に同意です。https://t.co/CLFS11BWXk
— CSS設計完全ガイドの人 / Adobe XD UG札幌代表 / HubSpot CMS Ninja (@assialiholic) December 25, 2019

思ったこと(概要)

読んでて滅茶苦茶勉強になった
pxとremどっち選んでも殆ど違いはなさそう
自分も周りの人もrem派ばかりだしこれからもrem使おうかな
remだと直感的じゃないって所だけよく分からなかった...

思ったこと(くわしく)

はじめに

まず、上の記事はめっちゃためになります。~~このブログよりはるかに~~ 全web系の人は読むべき。pxとrem、それぞれの長所と短所について分かりやすく解説してあり、その上でこういう理由だからこっちを採用すべきという主張がなされています。

↑の記事書いてる人はCSSのプロフェッショナルです。マークアップ言語としてCSSが登場してから25年、CSSはここまで深くなったのかとある種の感動すら覚えました。

自分の頭にはremしかなかった

私はほぼremしか使いません。そしていわゆる62.5%も使わない派です。pxは概念としてはもちろん知ってるけど、ブレークポイントにしか使わないかなーって感じ。

私がフロントエンドエンジニアになったのが2017年です。remが誕生したのはたしかCSS3からなので、生まれた頃にはすでにremがありました。いわゆるremネイティブ世代です。~~なにそれ~~

自分の認識では「基本単位はrem、でも昔はpxしかなかったから場合によってはpxも使おうな」みたいな感じでした。なので、今回の経験を通してモダンフロントエンドのfont-sizeでpxが妥当であるケースが存在し得るというのはたいへん勉強になりました。

同時に私はpxとし比較して利点があるからremを使っていたのではなく、そもそもremしか選択肢に入れていなかったことに気付かされました。自らの未熟たるや。

remだと何が良いのか

ではpxと比較した際のremの利点は何か。最たるものとして、
「ブラウザのフォントサイズ変更機能が使える」
という点が上げられており、それに対して
「その機能はほぼ使われていない」
「ユーザーの選択肢を広げることが大切」
といった反証が続きます。

元の記事中にもありますが、私はユーザーの選択肢を広げることが大切であるという点に大きく賛同します。しかしながら、完全なユーザーファーストを謳うならば古いIEも対応しろって話になるので、この件がremを採用する決定的な理由にはなり得ないかなーとも思いました。でも一つ確かなのは、あえてpxにするメリットがないという点です。じゃあ今まで通りremを使おうかな、と私としては思いました。

周りの人remばっかじゃない？

前述の通り私はremしか使いませんが、ほんっとのCSS覚えたては勿論pxで書いてました。でもそのちょっと後に「これからはremの時代だ！」的なのを見てremに変更したことを覚えています。当時兄貴分だったwebデザイナーの方もremでした。そこから3年が経ち、現在関わらせていただいているwebデザイナーの方も殆どがremです。CSSフレームワークも私が知る限りは単位がremのものが殆どです。最近はよくtailwind.cssを使うのですが単位はrem。

閑話休題、私が言いたいのは私にとっての教科書は常にremだったということです。親が喫煙しなければ子どもも喫煙しないみたいな逸話がありますが、親がremだったから私もremだったんです。そして仮説ですが、remを使う人はどんどん増えていくのではないでしょうか？CSS3が普及しきった今、remをためらう理由があまりないように思えるからです。

remだと直感的じゃない？

冒頭の記事の主張でpxの方が直感的、remは直感的じゃないというのがありましたが、私は唯一ここだけがあんまりピンときませんでした。

もっとも、これは個人のスキルセットによりけりだと考えます。例えばCSS2時代からのコーダーの方なら当然pxの方が直感的でしょうし、グラフィックデザイナーや動画編集者の方なら当然pxの方が馴染み深いと思います。そういったスキルセットを持った方が担うマークアップなら、pxの方が直感的なのは頷けます。

対して、私の場合はpxの方が直感的というケースには該当しませんでした。3年間ずっとremを使い続けてきた人間としては、正直remの方が直感的です。**pxとremどっちが直感的かは人によりけりじゃないかな...**というのが率直なところです。

remの方が打鍵数増える？

もう1つ、ちょっと気になることがありました。pxよりremの方が打鍵数が増えるという主張です。「1.4remより14pxの方が2文字少ない」という寸法です。

これは全くその通りなのですが、なんでremだけ少数点込みなのでしょう？私があまり小数点込みで書かないのでちょっと気になりました。また、1pxより1remの方が大きい分、書く桁数は小さくなるケースが多いかと思います。例えば2remと20pxならどっちも4文字です。もっとも、これらを加味してもpxの方が打鍵数が少ないのは事実です。