CSSでフォントサイズ（font size）を指定するには？適切な単位の選び方

emとrem、どっちがいい？

昨今のWebデザインを取り巻く環境の中では、*「em」よりも「rem」*の方が好ましいと言われています。

しかし、「em」もMedia Queriesのブレイクポイントとして指定するときには未だによく使うので、適材適所で使い分けるのがよいでしょう。その際、「em」と「rem」の違いをしっかりと理解しておくことが重要です。

em

「em」は、親要素に対しての相対的なサイズのことです。
例えば、bodyのfont-sizeを「100%」とした場合は、ブラウザのデフォルトのフォントサイズ「16px」が基準となり計算されます。

ただし、相対指定は親要素の影響を受けてしまう、いわゆる「複利」の計算になってしまうので、入れ子された要素のときには注意が必要です。

rem

「em」は親要素に対しての相対計算を行いますが、「rem」はroot(html)のフォントサイズを元に計算します。
常にrootが基準となるので、非常にわかりやすくスッキリとデザインを行うことができます。

もちろん、何もrootのフォントサイズを指定していない場合は*「1rem＝16px」*という計算方法になるので、初めのうちはpxを扱っているときのように試行錯誤しながら適切なフォントサイズを探すことになりますしかし、フォントサイズを調整する際にはrootのフォントサイズを変えるだけでいいので、メンテナンスを行いやすいというメリットがあります。

適切なフォントサイズの単位を選ぼう

CSSで最もよく使われているフレームワークであるBootstrapもバージョン4から「px」ではなく「rem」を採用するなど、Web制作の現場では「px」を使うことがだんだん少なくなってきました。

しかし、Media Queriesでは「rem」よりも「em」が推奨されるなど、単位ごとに特性を押さえて使用することが大切です。

参考：
CSSMedia Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要 | コリス

CSSについてもっと学ぶ

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。 エンジニアでなけれWebサイトの制作や運営はCMS（コンテンツ管理システム）に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。 今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。

scss・sass徹底入門。使い方や導入方法を説明【CSS】

SCSSとSASSは、CSSを使用する人にとって、耳にする機会が多い言語ではないでしょうか。効率的なコーディングを行う上で、便利であるという評価を知っているものの、まだ触れたことがないという人もいることでしょう。使いはじめるとすっかりその便利さにはまってしまうと思いますので、ぜひ触れておきたいところです。今回はSCSSとSASSにスポットをあてて、2つの違いや書き方、導入方法など必要となる基本的な知識をまとめました。コーディングに対する認識が大きく変わるかもしれません。これから入門を検討されている皆様のお役に立てていただければ何よりです。