レスポンシブWebデザインを行う際、ウィンドウサイズに合わせて画像サイズやレイアウトを変更したりします。スマートフォンなどの小さなデバイスでPCと同じ文字サイズで表示すると改行などが多くなり長いページになったりして、場合によっては見ずらくなってしまうこともあります。そこで、ウィンドウサイズに合わせてフォントサイズも変わるようにすることで、読みやすいページになります。
このように、ウィンドウの大きさに合わせてフォントサイズを調整することを「レスポンシブタイプセッティング」と言います。

レスポンシブタイプセッティングの作り方

レスポンシブタイプセッティングを使って文字サイズを調整するには、emなどの相対単位を使って調整していきます。emやremを使うことで基準となるフォントサイズを変更するだけで、すべての文字サイズやmargin、paddingの値も連動して変更されるというメリットがあります。

emやremでサイズを指定する

em単位で指定する場合は、フォントサイズを指定する要素の親要素のフォントサイズを基準に計算されます。rem単位で指定する場合は、ルート（html要素）が常に基準となって計算されます。

計算方法

emやremでフォントサイズを指定する場合の計算方法は「emやremに変換したいpx値÷基準となるフォントサイズのpx値」で算出します。例えば、基準サイズが16pxで適用したいサイズが20pxの場合、「20÷16」で「1.25em」となります。

メディアクエリーで基準の文字サイズを変える

メディアクエリーを使って、デバイスごとに基準となるフォントサイズを変えることで見やすいページを作ることができます。目安としてスマートフォンでは12px以上、タブレットでは14px以上、PCでは16px以上あれば良いとされています。

html {
  font-size: 75%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 100%;
  }
}

このようにすることで、ウィンドウサイズに合わせて文字サイズが変わるようになります。例ではパーセントで指定をしましたが、px単位で12px、14px、16pxなどと指定しても構いません。

marginやpaddingをem単位で指定する

marginやpaddingをem単位を使って指定する場合は、適用する要素のフォントサイズが基準となります。例えば、基準となるフォントサイズが16pxでh1要素に「font-size:32px;」「margin-bottom:20px;」を指定したい場合、フォントサイズは「32÷16」で計算するので「font-size:2em;」となります。一方、margin-bottomに関しては、適用する要素のフォントサイズを基準とするので、「20÷16」ではなく「20÷32」と計算して「margin-bottom:0.625em;」となります。

このように、font-sizeプロパティでは親要素となるフォントサイズを基準とし、marginやpaddingプロパティでは、その要素のフォントサイズが基準となります。

以上が、ウィンドウサイズに合わせて文字サイズを変える方法となります。

おすすめの記事