WEBPocketTweetところで、レスポンシブサイトのフォントサイズってどうやって指定していますか?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と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に変更できます。/*初期値16pxの62.5%でルートが10px*/これでremでフォントサイズを指定する際に計算しやすくなります。2.2rem(10×2.2=22px)でOKです。初めに少し触れましたが、フォントサイズのremはブラウザのIE8以下でサポートされていません。IE8以下で正常に表示させる為には、pxとremの併用をオススメします。px指定で先にCSSを読ませて、その後にremに対応するブラウザは上書きされます。フォントサイズ指定の順番は必ずpxremで記述しましょう。デバイス別の推奨フォントサイズCSSのメディアクエリ(デバイスの幅に応じてCSSを切り分けられるコード)を使ってhtml(ルート)のフォントサイズをデバイス別に指定しておきます。*/}一般的なデバイス毎の推奨フォントサイズを纏めていますので参考にしてください。▽デスクトップ16px以上まとめレスポンシブデザインのフォントサイズは、emよりもremで指定する方が設計も簡単だしメンテナンスも簡単。今日ご紹介した様に、メディアクエリ毎(デバイス毎)にフォントサイズをremで指定する。これが一番簡単な方法かなと思います。tomo09648908プロフィールzou本業は企業のPRデザイナー。Webサイト、動画、屋外広告を含めたプロモーションの企画立案から体験設計、ビジュアル開発などの実制作まで手掛ける。個人では主に個人事業主や中小企業向けにプロモーションに関わる制作をワンストップで行っています人気記事おしゃれな名刺デザイン35選。