Webデザイナー必見!レスポンシブデザインのフォントサイズ指定方法のまとめ

[2015年版] レスポンシブデザインを作る時のフォントサイズの指定方法

どうも GAHAKUです。

一つのhtmlでPC、スマホ、タブレットの表示に対応できるレスポンシブデザイン。

ところで、レスポンシブサイトのフォントサイズってどうやって指定していますか?

px?

%?

僕がオススメするレスポンシブデザインのフォントサイズの指定方法はrem。

ちなみにフォントサイズ指定でよく使われるemと少し指定方法が異なります。

remには一つ弱点があって、IE8以下のブラウザに対応していません。

なので今日は、IE8以下のブラウザ対策も踏まえ、remを使ったレスポンシブデザインのフォントサイズ指定方法をご紹介したいと思います。

 

レスポンシブデザインとは?

まずレスポンシブデザインって何だろう?って方へ。

レスポンシブデザインとは、Webページにアクセスした人のデバイス(パソコン、タブレット、スマホ)によって自動的に見易い表示に切り替わるデザインの事です。

メリットはPC用、スマホ用といった別ファイルを用意する必要がないってこと。

制作者にとっては、メンテナンスは楽ちんです。

但し、サイトの設計が非常に複雑で、普通のサイトより制作時間が余計にかかってしまうなんてこともあります。

メンテナンスが簡単だからという安易な理由だけで導入を決めるのではなく、レスポンシブデザインが本当に必要かどうかサイト制作初期の段階でじっくり検討すべきです。

レスポンシブデザインを導入するメリットがなければ、無理にレスポンシブにする必要はないかなぁと思います。

 

フォントサイズのemとremの違い

まずhtmlのフォントサイズの初期値は16px

CSSでフォントサイズを指定しなければ、16pxでページ上に表示されます。

まず、CSSの『em』は親要素のフォントサイズに対する相対指定。

たとえばemでフォントサイズを指定したい要素が、外側のdiv又はp要素に含まれている場合。

そのdivやp要素がemで指定するフォントサイズの基準になります。

 

『rem』はルートのフォントサイズに対する相対指定

remの場合は、どの要素に含まれているかは考えなくても大丈夫。

htmlの相対サイズになります。

こちらをご覧下さい。

<body>
 <div id ="wrapper">
  <div id ="contents">
  </div>
 </div>
</html>


divのwrapperのフォントサイズを64px、contentsのサイズを32pxに指定したい場合、CSSの指定はそれぞれこのようになります。

▽em指定の場合

/*htmlの初期値は16px*/
#wrapper { font-size: 4em; }
#contents { font-size: 0.5em; } /* #wrapper 64pxの相対指定 */ 

 

▽rem指定の場合

/*htmlの初期値は16px*/ 
#wrapper { font-size: 4rem; } 
#contents { font-size: 2rem; } /* htmlの相対指定 */ 

 

このように、emとremではフォントサイズの指定方法が異なります。

emは親Boxのフォントサイズに対する相対指定。

remはhtml(ルート)のフォントサイズに対する相対指定。

emは親Boxのフォントサイズを把握しておく必要がありますが、remはhtml(ルート)に対する相対指定なので、その必要はありません。

フォントサイズの管理が簡単なのは断然remで指定する方法です。

 

ルート(html)のフォントサイズを10pxに

remはhtml(ルート)の相対指定です。

ただ、ルートの初期値16pxは少し計算しずらいですよね。

22pxでフォントサイズを指定したい場合、計算が面倒です。

なので、計算しやすいようにルートのフォントサイズを10pxにしておきましょう。

htmlのfont-sizeを62.5%で指定すれば、16pxの62.5%で10pxに変更できます。

 

▽htmlのフォントサイズを10pxに指定する場合

html{ font-size: 62.5% } /*初期値16pxの62.5%でルートが10px*/

 

これでremでフォントサイズを指定する際に計算しやすくなります。

例えば22pxで指定したい場合、

font-size: 2.2rem(10×2.2=22px)

でOKです。

 

フォントサイズremでIE8以下をフォロー

初めに少し触れましたが、フォントサイズのremはブラウザのIE8以下でサポートされていません。

IE8以下で正常に表示させる為には、pxとremの併用をオススメします。

▽html

<html>
<body>
<div id="wrapper">
<div id="contents">
</div>
</div>
</body>
</html>

 

▽CSS

html{ font-size: 62.5% } /*初期値16pxの62.5%でルートが10px*/ 
#wrapper { font-size: 64px; font-size: 6.4rem; } 
#contents { font-size: 32px; font-size: 3.2rem; } 

 

px指定で先にCSSを読ませて、その後にremに対応するブラウザは上書きされます。

フォントサイズ指定の順番は必ず

  1. px
  2. rem

で記述しましょう。

デバイス別の推奨フォントサイズ

CSSのメディアクエリ(デバイスの幅に応じてCSSを切り分けられるコード)を使ってhtml(ルート)のフォントサイズをデバイス別に指定しておきます。

こんな感じで。

@media screen and (max-width: 320px) { /*スマホの場合*/
/* ここにフォントサイズを記載 */
}


一般的なデバイス毎の推奨フォントサイズを纏めていますので参考にして頂けたら幸いです。

▽スマートフォン
12px〜14px

▽タブレット端末
14px以上

▽デスクトップ
16px以上

 

まとめ

レスポンシブデザインのフォントサイズは、emよりもremで指定する方が設計も簡単だしメンテナンスも簡単。

いい事だらけです。

今日ご紹介した様に、メディアクエリ毎(デバイス毎)にフォントサイズをremで指定する。

これが一番簡単な方法かなと思います。

もし知らなかった方は、是非試してみてくださいね。

でわ。

Sponsored Link

コメントを残す