なぜ「rem」でfont-size指定をするのが良いのか。調べてみた。

   

こんにちは、墨田区在住のウェブデザイナーの本間です。
 
ウェブサイトのフォントをCSSで指定する単位がいくつかあります。
現在は「px」は使わずに、「rem」を使う方が多いようですね。
 
 
私は長らく「em」を使用していました。
といっても明確な理由があって「em」を使用していたわけではありません。
なんとなく使っていました。
 
そこで、今さらではありますが、
なぜ「rem」を使うのか、その理由やメリットを調べてみました。
 
 
 

まずは、単位について調べてみました

 

px

・絶対指定
・1px=1ドットで表示
・他の要素の影響を受けない
 

em

・相対指定
・1em=16px(ブラウザ標準のフォントサイズ)で表示される
・親要素のfont-sizeを基準に計算される
 

rem

・相対指定
・1em=16px(ブラウザ標準のフォントサイズ)で表示される
・root要素(html)のfont-sizeを基準に計算される
・親要素のfont-size指定の影響を受けない
・IE8以下は非対応
 

パーセント(%)

・相対指定
・100%=16px(ブラウザ標準のフォントサイズ)で表示される
・親要素のfont-sizeを基準に計算される
 
 

スマホの登場で「px」指定は推奨されなくなった

 
先ほど、CSSで文字サイズを指定する4つの単位を紹介しましたが、
現在は「px」という単位は、あまり使われないようです。
 
というのも14pxと指定してしまうと、
PCで見るとちょうどいいけど、タブレットで見ると小さいという問題があったようです。
 
そこで、各端末の標準フォントサイズで表示できる
「1em」や「1rem」を使用するのが主流になったようですね。
 
他にもIEで文字の拡大縮小ができない等の理由があったようですが、
個人的には、スマホ登場による原因が決定的だったように思いました。
 
 

「rem」を使ったシンプルなfont-size指定が主流となった

 
先ほど、端末ごとの標準フォントサイズで表示させるために
「1em」や「1rem」を使用すると書きました。
 
しかし、現在はもう少し発展して、シンプルなfont-size指定のために
「rem」を使用するのが主流になっているみたいですね。
 
html {font-size: 62.5%;}というやつ。
16px(ブラウザ標準のフォントサイズ)*62.5% = 10px(←これがrootのサイズとなる)
 
10pxが基準のフォントサイズになるので、
その他のfont-size指定の計算がかんたんになっていいよね。
 
 
 

ということで

 
今回調べたことを、ブログに書いてみました。
なんだかグルっと回って、CSSリセットのために「rem」を使ってる
みたいですね。
 
複数の人がいじる、HTMLやCSSファイルはメンテナンス性が高いことも重要です。
わたしもメンテナンス性を高めるために、メインストリームな方法でマークアップしていきますね。
 
 
 
 

 - ウェブデザイン