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

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

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

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

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

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

目次

calcとvwを使用したレスポンシブ文字サイズの計算式

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

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

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

  • 画面幅1200pxの時にfont-size:180px
  • 画面幅800pxの時にfont-size:30px
  • 1200px~800pxの間は、幅に合わせて縮小・拡大する

というふうになります!(※例なので極端な数値にしています)

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

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

  1. 最大文字サイズ
  2. 最大画面幅
  3. 最小文字サイズ
  4. 最小画面幅
/* サンプルコード */
.sample {
  font-size: calc(30px + 150 * (100vw - 800px)/400);
}

上のサンプルコードで言えば、

  1. 最大文字サイズ:180px
  2. 最大画面幅:1200px
  3. 最小文字サイズ:30px
  4. 最小画面幅:800px

ということになります。

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

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

/* calc + vwの公式 */
font-size: calc(A + B * (100vw - C)/D);
  • A・・・最小文字サイズ
  • B・・・最大文字サイズ – 最小文字サイズ
  • C・・・最小画面幅
  • D・・・最大画面幅 – 最小画面幅

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

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

STEP
Aの計算

まずAの箇所には、最小文字サイズが入ります。

ここではサンプルコードに従って、30pxと指定します。

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

Bの箇所には、最大文字サイズ – 最小文字サイズの値が入ります。

この場合は180px – 30pxとなるので、150pxですね。

CSSに書く際はpxの単位は書かずに、数値のみ入れてください。

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

続いてCには、最小画面幅が入ります。例の最小幅は800pxなので、800pxを入れます。

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

最後のDですが、ここには最大画面幅 – 最小画面幅の値が入ります。

1200px – 800px = 400pxなので、pxの単位は無しで400を入れます。

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の計算式の仕組みはどうなっているのか?

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

  • 画面幅1000pxのとき・・・24px
  • 画面幅320pxのとき・・・16px

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

.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の箇所に画面幅を代入するだけで簡単に知ることができます。

  • 画面幅1000px: 24px
  • 画面幅800px: 21.6471px
  • 画面幅500px: 18.1176px
  • 画面幅320px: 16px

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

calcとvwで最小・最大文字サイズを実装可能!

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

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

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

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (4件)

コメントする

目次