ところで、レスポンシブサイトのフォントサイズってどうやって指定していますか？
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の場合は、どの要素に含まれているかは考えなくても大丈夫。
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の併用をオススメします。
▽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に対応するブラウザは上書きされます。
フォントサイズ指定の順番は必ず
- px
- rem
で記述しましょう。
デバイス別の推奨フォントサイズ
CSSのメディアクエリ（デバイスの幅に応じてCSSを切り分けられるコード）を使ってhtml（ルート）のフォントサイズをデバイス別に指定しておきます。
@media screen and (max-width: 320px) { /*スマホの場合*/ /* ここにフォントサイズを記載 */ }
一般的なデバイス毎の推奨フォントサイズを纏めていますので参考にしてください。
- ▽スマートフォン
- 12px〜14px
- ▽タブレット端末
- 14px以上
- ▽デスクトップ
- 16px以上
まとめ
レスポンシブデザインのフォントサイズは、emよりもremで指定する方が設計も簡単だしメンテナンスも簡単。
いい事だらけです。
今日ご紹介した様に、メディアクエリ毎（デバイス毎）にフォントサイズをremで指定する。
これが一番簡単な方法かなと思います。
でわ。
コメント