【CSS】calcとvwを併用して最大・最小フォントサイズを設定する方法【IE11対応】

レスポンシブ対応をする中で、文字サイズの最大値・最小値を設定できたらいいなと思ったことはありませんか？

横幅の最大値や最小値を指定できるmax-width min-widthのように、max-font-sizeやmin-font-sizeがあればすごく便利ですよね。

残念ながらそういったプロパティは現状ありませんが、CSSのcalcとvwという単位を使えば、最大・最小フォントサイズを設定することができます！

今回の記事では、このcalcとvwの合わせ技の使い方を紹介しようと思います。

IE11を含め主要ブラウザ全てでサポートされていますので、安心してお使いいただけます。

calcとvwを併用した文字サイズの計算式は、こんな見た目になります。

.sample {
  /* 
    calc + vwの計算式
    画面幅1200pxの時 font-size: 180px
    画面幅800pxの時 font-size: 30px
  */
  font-size: calc(30px + 150 * (100vw - 800px)/400);
}

このコードを使用すると、

というふうになります！（※例なので極端な数値にしています）

使い方①文字サイズや画面幅サイズの数値を指定する

計算式には、4つの数値が必要です。

/* サンプルコード */
.sample {
  font-size: calc(30px + 150 * (100vw - 800px)/400);
}

使い方②数値を公式に当てはめる

それぞれの数値を決めたら、公式に当てはめていきます。

/* calc + vwの公式 */
font-size: calc(A + B * (100vw - C)/D);

以上の値をそれぞれ入れると、式が完成します！

最初は複雑でわかりにくいので、一つ一つ順番に説明していきますね。

font-size: calc(30px + B * (100vw - C)/D);

font-size: calc(30px + 150 * (100vw - C)/D);

font-size: calc(30px + 150 * (100vw - 800px)/D);

font-size: calc(30px + 150 * (100vw - 800px)/400);

この式を使うことで、最大画面幅から最小画面幅のあいだで、文字がレスポンシブ化されるようになります。

例えば以下のコードだと、

/* 320px - 16px | 768px - 20px */
font-size: calc(16px + 4 * (100vw - 320px)/448);

最小幅の320pxでは16px、画面幅768pxのiPadでは20px、ということもできますね。

かなり便利なので、ぜひ使ってみてください。

calcとvwの計算式の仕組みはどうなっているのか？

ここでは、計算式がどういう仕組みなのかを説明しますので、知りたい方だけ読んでみてください。

上記の文字サイズを実装するとします。

.sample {
  /*
    画面幅1000pxのとき:24px 
    画面幅320pxのとき:16px
  */
  font-size: calc(16px + 8 * (100vw - 320px)/680);
}

計算式はこんな感じになります。

指定した画面最大幅で見た場合

ここで、画面幅1000pxのときの計算を見てみましょう。

画面幅1000pxのときの100vwは、1000pxですね。（1vw = 画面幅の1%）

なので、計算式の100vwの箇所に1000pxを代入します。

すると、

16 + 8 × (1000 – 320)/680

となり、更に簡略化すると、

16 + 8 × 1 = 24

という結果になります！

指定した最小画面幅で見た場合

続いて、最小幅である320pxの場合は、以下のような計算になります。

16 + 8 × (320 – 320)/680

式の右側が0になるので、

16 + 8 × 0 = 16

となります。これでだいたい仕組みがわかっていただけたかと思います。

指定した最大・最小画面幅の間は文字サイズが可変する

画面幅1000px~320pxの間では、横幅に合わせて24px~16pxの間で可変します。

こちらも式の100vwの箇所に画面幅を代入するだけで簡単に知ることができます。

このように、最小値と最大値の間で変化していることがわかりますね。

以上、文字サイズの最大・最小値を指定できるコードを紹介しました。

vwのみでもレスポンシブ文字サイズは実装可能ですが、calcと組み合わせることでより柔軟にサイズ指定できます。

さらにIE11や主要ブラウザにも対応済みなので、実際のプロジェクトでぜひ使ってみてください。