CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator

Post on:2023年7月24日

Fluid Type Scale Calculatorの特徴

Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。

面倒な計算もこのツールを使用すると、簡単にできます。

Fluid Type Scale Calculator

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

CSSのclamp()関数は、すべての主要ブラウザにサポートされています。

min(), max(), clamp()のサポートブラウザ

CSSのclamp()関数について詳しくは、下記をご覧ください。

CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説

Fluid Type Scale Calculatorの使い方

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を使用した場合のルート値。