Home
CSS
フォントサイズを可変にする方法【CSSのclamp関数で実現】

フォントサイズを可変にする方法【CSSのclamp関数で実現】

公開日
2021.10.09
更新日
2022.04.02
フォントサイズを可変にする方法【CSSのclamp関数で実現】

どうも!かけちまるです!

webサイトを構築するにあたってレスポンシブ対応は必須になっています。
そのレスポンシブ対応で困ってしまう1つがフォントサイズだと思います。

でも、デザインカンプに合わせてコーディングしたとしても少しブラウザのサイズを変えればレイアウトが微妙になってしまう…
フォントサイズを可変にできる便利な方法があればと思ったらcssでclamp関数というのが便利だったのでご紹介していきたいと思います。

この記事では、

  • ・clamp関数の使い方
  • ・IEではclamp関数が使えない
  • ・IEでもフォントサイズを可変にする方法
  • ・Safariでclamp関数が効かない時の対処法

がわかります。

clamp関数の使い方

CSS
コピー
font-size: clamp(最小値, 推奨値, 最大値);

フォントサイズの可変はpxではなくvwを単位にすることが多いと思いますがどこまでも小さくなったり大きくなったりします。
clamp関数を使うと最小値と最大値を決めることができます。
min-widthとかmax-widthみたいな感じですね。

CSS
コピー
font-size: clamp(16px, 2.9vw, 32px);

上記の例だと、16pxから32pxの間で可変になってくれます。

実装サンプル

16pxから32pxの間で可変になってくれる
現在、 です。

clamp関数はIEではサポートされてない

便利なclamp関数ですがIEのみサポートされていないようです。

IE Edge Firefox Chrome Safari iOS Android
バージョン × 79~ 75~ 79~ 13.1~ 13.4~ 94~

記事が古かったらこちらから最新状況が見れます。

IEではサポートされていないので実際clamp関数を使うときは以下のようにする必要がありそうです。

CSS
コピー
font-size: 32px; /* IE対策 */ font-size: clamp(16px, 2.9vw, 32px);

このようにすればIE以外は可変になり、IEでは32pxで表示されるようになります。

IEでもフォントサイズを可変にする方法

どうしてもIEでフォントサイズを可変にしたい場合はcssのcalc関数を使うと実現できます。

calc関数を使う方法では、例えば画面幅500px~1100pxの間でフォントサイズ16px~32pxで可変にするということができます。

しかし、calc関数を使う方法は注意が必要でどこまでも画面幅に応じてフォントサイズが大きくなったり小さくなったりしてしまうということです。

やり方としては公式に当てはめて設定します。
少しめんどくさいですがこれでIEにも対応できます。

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

例えば、画面幅500pxから1100pxの間をフォントサイズ16pxから32pxで可変にしたい場合は以下のようになります。

CSS
コピー
font-size: calc(16px + 16 * (100vw - 500px) / 600);

実装サンプル

画面幅500pxの時に16px、画面幅1100pxの時に32pxになるよう可変になってくれる
現在、 です。

Safariでclamp関数が効かない時の対処法

Safariはclamp関数をサポートしているにも関わらずうまく計算してくれないようです。
※2022年1月23日現在

そんな時は次のCSSを追加してみてください。

CSS
コピー
*{ min-height: 0vw; /* Safari clamp関数対策 */ }

なぜmin-height0vwにすると解決するのかは不明なのでわかる方がいればTwitterお問い合わせフォームからご教授いただけると助かります。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Three.js】マウスにライトを追従させる方法

【Three.js】マウスにライトを追従させる方法

Visual Studio Codeの検索と置換

Visual Studio Codeの検索と置換