レスポンシブコーディングにおいて、端末ごとに異なる画面幅に合わせてデザインを調整する場合に、メディアクエリを使ってスタイルの切り分けが行われますが、過去記事「メディアクエリを使わないレスポンシブコーディングを試してみる ＃1：カラムレイアウト」ではメディアクエリを使わずにレスポンシブ対応のカラムレイアウトを作成する方法についてまとめましたが、この時は画面幅に合わせてレイアウトのコンテナ要素の幅も変わり、その中でカラムを均等に分割するという手法で対応していましたが、画面幅を基準にサイズを指定することでメディアクエリを使わなくても、レスポンシブコーディングを実現することができます。   今回は前回のカラムレイアウトに引き続き、フォントサイズについてもメディアクエリを使わない方法でレスポンシブコーディングに対応し、画面幅に対応して変更していくように考えてみたいと思います。 （こちらの記事も合わせてどうぞ） メディアクエリを使わないレスポンシブコーディングを試してみる ＃1：カラムレイアウト   今回は下記のようなテキストをそれぞれの手法で検証してみたいと思います。また後述するコードのフォントサイズは、画面幅が1440pxで68pxの大きさになることを前提とした設定にしています。

<p>
  ダミーテキストダミーテキストダミーテキストダミーテキスト
</p>

   

1. メディアクエリあり（フォントサイズをpxやremなどの絶対値で画面幅ごとに指定）

今回もはじめにメディアクエリを使った一般的によく用いられる方法から見ていきます。この方法ではデフォルトのフォントサイズを指定した上で、メディアクエリを使って画面幅ごとに適切な文字サイズになるよう個別に絶対値で設定していく形になります。

p {
  font-size: 68px;
}
@media (max-width: 1200px) {
  p {
    font-size: 56.6667px;
  }
}
@media (max-width: 980px) {
  p {
    font-size: 46.2778px;
  }
}
@media (max-width: 768px) {
  p {
    font-size: 36.2667px;
  }
}
@media (max-width: 540px) {
  p {
    font-size: 25.5px;
  }
}
@media (max-width: 420px) {
  p {
    font-size: 19.8333px;
  }
}

  このパターンで作成したサンプルはこちらに用意しています。ただこの方法ですと、コードの量が多くなるのと画面幅によっては見た目のバランスが変わってしまったり、文字数によっては行数が増えてしまうなどのデメリットがあります。    

2. メディアクエリなし（フォントサイズをvwの相対値で画面幅に連動させて指定）

次にメディアクエリを使わずにフォントサイズをレスポンシブに対応させていきます。ここではフォントサイズの単位に「vw」を使うことで、ビューポートの幅を基準にしたサイズの指定ができるようになります。メディアクエリを使わない分、コードもスッキリしました。ただし、サイズの単位はビューポートの幅いっぱいが100vwとなるため、目的のフォントサイズの値を算出するには計算が必要になってきます。

p {
  font-size: calc((68 / (1440 / 100)) * 1vw);
}

  上記では、ビューポートの幅が1440pxの時に68px相当のフォントサイズになるよう、vwの単位で設定する計算の例になります。つまり計算部分を分かりやすくまとめると下記のようになります。ここではcalc()を用いて値を指定していますが、Sassなどの場合には@functionなどでレスポンシブのフォントサイズの指定ができるような関数を用意しておいてもいいですね。

calc(( 基準となるフォントサイズ / ( 基準となるビューポート幅 / 100 )) * 1vw );

  このパターンで作成したサンプルはこちらに用意しています。この方法では、先ほどのメディアクエリを使って段階的に絶対値で指定していないので、そのままのバランスを保つことができますが、常に画面幅に対してフォントサイズが決まるので、画面が狭くなったり広くなったりすると、極端に文字が小さくなったり大きくなるという問題も起こってきます。    

3. メディアクエリなし（vwの相対値をベースに、clamp()で絶対値の下限と上限を設定した範囲指定で指定）

そこで、3つ目の方法を検討してみます。先ほどのvwの単位を使ったフォントサイズ指定では、画面の幅に完全に依存するため、どこまでも小さくなったり大きくなってしまいます。そうなることでテキストの視認性が下がったり、文字が大きくなることで見た目のバランスが変わってきたりします。そんな時に便利なのが「clamp()」です。これは基準となる値に加えて、上限と下限の値を設定し、その範囲で値が切り分けられるように出力することができるものです。詳しくは過去記事「IEのサポート終了で積極的に取り入れたいCSSプロパティ＃2：便利機能編」でも紹介していますが、比較的新しいプロパティで近年では積極的に取り入れられているのを見かけます。

p {
  font-size: clamp(19.8333px, calc((68 / (1440 / 100)) * 1vw), 68px);
}

  このパターンで作成したサンプルはこちらに用意しています。これで基本的にはビューポートの幅をベースにフォントサイズが変更され、下限のサイズより小さくなることはなく、上限のサイズ以上に大きくなることを防ぐことができます。つまり範囲を指定したフォントサイズの設定ができます。  

---

  レスポンシブ対応を細かくすることで、デザインとしてのクオリティやユーザービリティを高められる可能性は高くなりますが、メディアクエリに頼りすぎてしまうと、どうしてもコードが肥大化してしまいます。またメディアクエリでは段階的にスタイルを切り替えるため、画面幅によってはスマートに見えないこともあります。そんな時にメディアクエリをできるだけ使わないような実装方法が選択肢にあるのはとても良いことですね。   （こちらの記事も合わせてどうぞ） メディアクエリを使わないレスポンシブコーディングを試してみる ＃1：カラムレイアウト