レスポンシブサイトの『font-size』を『rem』で指定するベストな書き方

 

デスクトップパソコン、タブレット、スマホなど、

画面サイズや解像度が全く違うデバイスを使う現代では、サイトの文字サイズをpxで固定する事はデメリットしかありません。

全ての要素に対して、デバイスごとに最適な文字サイズを書き直す必要が出てくるからです。

 

そんな問題を解消するのが、相対的なサイズ指定を行う「rem」や「em」です。

特に相対的なサイズ指定「rem」を行えば、メディアクエリでルートのサイズを変えるだけで、サイト全体のフォントサイズを一括変更できるのです。

 

この記事では、そんなレスポンシブサイトに最適なフォントサイズ指定方法を提案していきます。

レスポンシブサイトの『font-size』を『rem』で指定するベストな書き方

CSS

html {
    /* ルートのフォントサイズを10pxに設定しておく */
	font-size: 62.5%;
}

body {
	/* ルートのフォントサイズを1.6em（16pxと同等のサイズ）に設定 */
	font-size: 1.6em;
}

div h2{
	/* 68px */
	font-size: 6.8rem;
}
div a{
	/* 38px */
	font-size: 3.8rem;

}

 

これがベストな書き方です。

それでは順番に説明していきます。

説明

html要素のルートフォントサイズ指定

上記コードの3行目にある「font-size: 62.5%;」で、

html要素に対して、ルートのフォントサイズを10pxに設定しておきます。

 

ほとんどのブラウザで、ルート要素のフォントサイズが16pxに設定されています。

16pxに0.625を掛けると10pxとなるので、フォントサイズを「62.5%」と指定しています。

 

わざわざルートを10pxに設定する理由は、rem指定のときの計算が楽になるからです。

 

 

「10px = 1rem」なので

 

 

13行目にある「font-size: 6.8rem;」では

h2要素に対してフォントサイズを68pxに指定しているのと同じ。

 

17行目にある「font-size: 3.8rem;」では

a要素に対してフォントサイズを38pxに指定しているのと同じになります。

body要素のデフォルトフォントサイズ指定

body要素には、デフォルトのフォントサイズを指定します。

これによって、bodyの子要素・孫要素に当たるすべての要素に対して、フォントサイズを指定せずとも、デフォルトのフォントサイズを継承させることができます。

 

 

以下の違いを理解しておいてください。

• html要素に指定した「ルートのフォントサイズ」
• body要素に指定した「デフォルトのフォントサイズ」

 

ルートのフォントサイズとは、ブラウザの基準となるフォントサイズ。

このサイズを基準としてremやemのサイズを指定します。

 

デフォルトのフォントサイズとは、要素にフォントサイズを指定しなかった場合、

自動的に継承して適用されるフォントサイズ。

 

 

 

 

そして最も重要なポイントは、

8行目のデフォルトフォントサイズがem指定である事。

 

remではなくemであることに注意してください。

 

 

 

理由はchromeブラウザのバグです。

body要素にrem指定すると、chromeブラウザではbodyをルートとして解釈してしまいます。

 

あくまでルートはhtml要素。

body要素では、emを使って親要素のhtmlルートを参照してサイズ指定します。

 

デバイスごとの文字サイズ変更

デスクトップ、タブレット、スマホなど、

デバイスごとの文字サイズは、メディアクエリを使ってhtml要素のルートサイズを変えるだけで、html配下の全ての文字サイズを一括変更します。

 

 

スポンサーリンク