今回は、「CSSで文字や余白を取る際に、「px」or「rem」のどちらが良いのか？」について、ブログを書きたいと思います。

仕事でフロントエンドのコーディングをする方は、一度考えてみてはどうでしょうか？？

結論：どっちでもいい！

結論として、「px」と「rem」には、お互いにメリットとデメリットがあるので、一概にはどちらが良いか決めることはできません。

つまり、どっちを使ってもOK！

案件によって「px」がいい場合だったり、「rem」を使った方がいい場合もあります。

だから「絶対pxや！」と決めるのではなく、柔軟に使い分けをする方が大事なのではないでしょうか？

「px」で文字や余白を取る場合

まずはpxで文字や余白を取る場合について見ていきます。

メリット

pxはCSSを学習し始めて、一番最初に使う単位でしょう。

だから、初心者でも使いやすく、且つ直感的に数値が見やすいです。

あと、pxは直感的に見やすいので、チーム開発もやりやすくなります。

デメリット

pxのデメリットとしては、ブラウザ幅が変わっても、文字や余白のサイズが変わりません。

そしてレスポンシブの際に、1つ1つ文字や余白を変えていく必要があります。

「rem」で文字や余白を取る場合

次はremで文字や余白を取る場合について見ていきます。

メリット

remで相対的な値を指定することで、レスポンシブがしやすくなります。

例えば、以下のようにデフォルトで100pxと設定し、スマホの時は半分の50pxとすることで、一括でフォントや余白を半分のサイズにすることもできます。

html {
    font-size: 100px;
    @include sp {
        font-size: 50px;
    }
}

そして、文字や余白のサイズを変更が入った際も、一括で変更することができます。

デメリット

remを使うデメリットは、直感的に数値が見にくいことです。

例えば、以下のように指定すると、「1rem = 10px」になります。

html {
    font-size: 10px;
}

2remだと、20px。

すごく見にくいわけではないですが、px表記の方がやはり直感的に見やすいです。

remだと相対的な値になるので、どうしても頭の中で数値を変換する必要がありますので。

個人的な見解

最近では、pxで指定していてもブラウザで文字サイズを変更することができるようになっているので、これからはpxを使おうと考えています。

remは相対的な値なので、一括で文字や余白をレスポンシブすることができますが、正直一括で文字と余白を変更したことがないです。

大体の案件は、部分ごとにレスポンシブのサイズを調整します。

一括で文字と余白のサイズを調整する案件は、かなり稀ではないでしょうか？
（自分のサイトを作るならremで一括でレスポンシブしても良いかなと思いますが。）

一番大事なことは、自分で「px」と「rem」のどちらが良いのか考えて使うことです。

そして案件によって柔軟に使い分けること。

「px」と「rem」のどちらが良いのか問題は正解がないので、常に模索し続ける必要があると思っています。

これからも思考停止するのではなく、自分で考えて使っていきます。

最後に、今回の記事を書く時に参考にさせて頂いた記事を引用しておきます。

・なぜ文字や余白をremで指定する？その理由はアクセシビリティ！

・闇雲なrem信仰に物申す

・cssのremを使うとメディアクエリがすごく簡単になることが判明