レスポンシブデザインで実用的なフォントサイズ指定2019.11.042019.11.04レスポンシブWEBデザインでスマートフォンサイトを作るときに、フォントサイズをどう指定するかは意外と悩みます。多方面で紹介されている方法として、html(ルート)のフォントサイズを10px(62.5%)にしておき、body以下のフォントサイズをrem単位で指定する方法があります。これはメディアクエリを用いて全体のフォントサイズを相対的に変化させることが容易です。スマートフォンで全体のフォントサイズを相対的に小さくしてしまうと、もともと小さなフォントサイズを指定していた要素のテキストが極小サイズになってしまい、可読性を損ないます。そこで、実際に複数のレスポンシブ対応のスマホサイトを制作して最も実用的で、スマホ閲覧時のフォントサイズ修正が容易だった方法を紹介します。class="paragraph3">スマホは12pxで表示</p>基本的な使い方フォントサイズはremで指定スマホとPCでフォントサイズを変えたいテキストはremを指定します。html(ルート)のフォントサイズを変えてremで指定した要素全てに対して相対的に文字サイズを変化させます。font-familyにapple-systemは使わないiOSの場合、フォントサイズが自動的に1px小さくなり、Androidとフォントサイズが変わってしまいます。iOSでピッタリ収まっていた文字がAndroidでは折り返されていたり、デザインによっては制作コストが増えるため必要がなければ使わない。使う場合は、iOSでフォントサイズが-1pxされることを考慮したデザインが必要。サイズを固定させたい要素はpxで指定フォントサイズを固定したいものはpxで指定してルートのフォントサイズを小さくしてもスマホ閲覧時に極小サイズのフォントにならない様にします。具体的には13px以下はpx指定でサイズを固定してしまいます。12pxのフォントをルートでスマホ閲覧時に-2pxすると10pxの極小サイズになってしまいます。htmlとbodyのメディアクエリについてメディアクエリのブレイクポイントを堺にしてモバイルとPCのフォントサイズをそれぞれ指定します。これによりrem指定のフォントサイズを相対的に変更させることと、スタイルが定義されていないテキストのフォントサイズをスマホとPCそれぞれでコントロールさせることができます。フォントサイズの変更の仕方スマホで全体のフォントサイズを相対的に変更するhtmlのベースは10pxとし、1px小さくしたいときは10pxから0.625を引く。2px小さくしたいときは1.25を引く。スマホで全体を-1px小さくするにはfont-sizeを10pxから-.625します。全体で-2px小さくするときはfont-sizeを10pxから-1.25します。メディアクエリでPCはデフォルトの10pxを指定して、CSSに1.6remと指定することで。PCでは16px、スマホでは16pxから-1px、-2pxと言った任意のサイズを指定できます。スタイル未定義のテキストのフォントサイズを変更bodyでフォントサイズ未指定の要素をコントロールします。14pxで表示させたいときは1.4remを指定。htmlで相対的に1px小さくしているときは1.5remを指定しなければなりません。レスポンシブデザインで実用的なフォントサイズ指定Contactお問い合わせご相談、お打ち合わせ、お見積りなどお気軽にお問い合わせください。