CSSでfont-sizeをレスポンシブ対応にする最新テクニック! clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
Post on:2023年7月24日
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()
関数が便利です。clamp()
関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。
CSSのclamp()
関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。

Fluid Type Scale Calculator
Fluid Type Scale Calculator -GitHub
Fluid Type Scale Calculatorの特徴
Fluid Type Scale Calculatorはclamp()
関数を使用した流体フォントサイズのCSSを生成できるツールです。
面倒な計算もこのツールを使用すると、簡単にできます。

- 使用するフォント、スクリーンサイズ(最小・最大)、必要なサイズの種類など、すべてカスタマイズできます。
- リアルタイムでプレビューを表示。
- サンプルのテキストは自由に変更可能(日本語対応)。
- 流体フォントサイズのCSSをすぐに生成。
- MITライセンスで商用利用も無料です。
CSSのclamp()
関数は、すべての主要ブラウザにサポートされています。

min(), max(), clamp()のサポートブラウザ
CSSのclamp()
関数について詳しくは、下記をご覧ください。
Fluid Type Scale Calculatorの使い方
Fluid Type Scale Calculatorを利用するには、下記ページから。
登録など面倒なことは一切不要です。クローンを作成してローカルで動かすこともできます。

左パネルは各種設定で、右パネルにCSSがリアルタイムに生成されます。
左パネルを上から順に見てましょう。
まずは、「Minimum (Mobile)」で、最小フォントサイズとビューポート幅を設定します。続いて「Maximum (Desktop)」で、最大フォントサイズとビューポート幅を設定します。

フォントサイズとビューポート幅の最小と最大を設定
「Type scale」はフォントサイズの昇順で、文字スケールの各ステップの名前をカンマ区切りのリストで設定します。デフォルトでは「sm,base,md,lg,xl,xxl,xxxl」となっており、7つのステップがあります。
「Variable prefix」は変数に使用する名前、「Rounding」は小数点の桁数、「Include fallback CSS」はclamp()
をサポートしていないブラウザ用のフォールバックのCSSを含めるかどうか、「Show output in rems」は
rem
を使用するかどうか、「Rem value (pixels)」はrem
を使用した場合のルート値。

その他いろいろな設定
設定したフォントのサイズは、その下に表示されます。

プレビュー
フォントはGoogle Fontsなので、日本語フォント(M PLUS 1など)も利用でき、サンプルのテキストも自由に変更できます。あとは、「Screen width」でスクリーンサイズを変更してフォントサイズが期待通りになるか確認します。

プレビュー
sponsors