ヘルプ

fluid typographyのCSS clamp()ジェネレーター

このジェネレーターは、5つの数値からフォントサイズごとのCSSカスタムプロパティをまとめて作ります。どれもrem単位とvw単位を組み合わせたclamp()で書かれています。ビューポートの範囲、両端の基準サイズ、スケール比を入力すると、--text-xsから--text-4xlまでのすべてのステップが、メディアクエリなしで画面幅に合わせてなめらかに変化します。何もアップロードされず、CSSはブラウザーの中で作られます。

fluid type scaleをつくる手順

上にある5つの入力欄を埋めます。最小ビューポート(初期値320)と最大ビューポート(1200)は、文字がいちばん小さくなる画面幅と、いちばん大きくなる画面幅で、単位はピクセルです。最小の基準サイズ(16)と最大の基準サイズ(20)は、その2つの幅での本文サイズです。スケール比(1.25)は、各ステップが1つ下のステップよりどれだけ大きくなるかを表します。どの欄にも数値入力欄とスライダーがあります。

  1. 画面幅の範囲を入力します。
  2. 狭い画面と広い画面での基準サイズを入力します。
  3. スケール比を選びます。
  4. 下のCSS欄は入力するたびに更新されるので、送信ボタンはありません。内容を確認したらCSSをコピーを押し、:rootのブロックをスタイルシートに貼り付けてください。

使えない値があると、その欄にメッセージが表示されます。最大ビューポートは最小ビューポートより大きく、最大の基準サイズは最小の基準サイズより大きく、スケール比は1以上、すべての数値は0より大きくしてください。サイズを指定する場所では、たとえば h1 { font-size: var(--text-3xl); } のようにステップを使います。

どの画面幅でもプレビューで確認

プレビューのプレビュー幅を、最小ビューポートと最大ビューポートの間でドラッグしてください。各ステップが、その幅で実際に適用されるサイズのサンプル行「なめらかに拡大縮小する文字」として表示され、変数名とピクセルサイズも並びます。いちばん大きいステップが一番上です。

コピーする前に、小さなスマートフォンと幅の広いデスクトップの両方で、本文と見出しの差を確かめられます。

clamp()のフォントサイズの計算方法

ステップごとに、狭い側のサイズ(最小の基準サイズ×スケール比のステップ乗)と、広い側のサイズ(最大の基準サイズ×同じ乗数)を求めます。その2点を結ぶ直線を引き、傾きはサイズの変化量をビューポート幅の変化量で割った値、切片は最小サイズから最小ビューポート×傾きを引いた値になります。傾きがvwの部分、切片がremの部分になり、両端のサイズがclamp()の最小値と最大値になります。値は小数第4位で丸められます。

初期値のとき、320px、760px、1200pxでのサイズは次のとおりです。

pxではなくremとvwを使う理由

vwだけで書いたサイズは、訪問者がブラウザーで選んだフォントサイズを無視し、ズームしても大きくなりません。ここでは数値をremの部分とvwの部分に分けて出力するので、文字はユーザーの基準フォントサイズに従い、ズームもできます。大きな文字が必要な人にも使いやすいままです。このツールがpxを出力することはありません。

サイトで html { font-size: 62.5% } のように16px以外のルートサイズを指定している場合は、詳細設定を開いてルートのフォントサイズを変更し、1remに合わせてください。

ビューポート、基準サイズ、スケール比の選び方

初期値の320〜1200は、小さなスマートフォンからノートパソコンまでをカバーします。文字の拡大を止めたい最大の画面幅を最大ビューポートに設定してください。それより広い画面では最大サイズのまま固定されます。本文には16pxと20pxの組み合わせがよく使われます。スケール比で、スケールの印象が決まります。

スケール比を1にすると、すべてのステップが同じサイズになります。スケール比は両端で共通の1つの数値なので、320pxでも1200pxでもスケールの比率は同じで、変わるのは基準サイズだけです。

詳細設定では、変数の接頭辞(初期値は--text)ですべてのプロパティ名を変えられます。ステップ名は、sm, lg, xl(--text-sm、--text-base、--text-lgなど)と-1, 1, 2(--text--1、--text-0、--text-1など)から選べます。小さい側のステップ(0〜4、初期値2)と大きい側のステップ(0〜8、初期値5)で、基準サイズより下と上にいくつサイズを作るかを決めます。

このツールでできないこと

作れるのはタイプスケールだけです。Tailwindなどへの書き出し、ステップごとの個別設定、狭い側と広い側で別々のスケール比、px出力には対応していません。

よくある質問

fluid type scaleとは何ですか?

fluid type scaleとは、ブレークポイントで急に切り替わるのではなく、画面幅に合わせてなめらかに変化するフォントサイズの一式です。小、基準、大、特大といった各ステップに、狭い画面向けの最小サイズと広い画面向けの最大サイズを決め、その間のサイズは直線に沿って変わります。このジェネレーターは各ステップをCSSカスタムプロパティとして出力するので、サイト全体で繰り返し使えます。

フォントサイズにCSSのclamp()を使うにはどうすればよいですか?

clamp(最小, 推奨, 最大)は3つの値を取ります。ブラウザーは推奨値を使いますが、最小値より小さくなったり、最大値より大きくなったりはしません。文字の場合、推奨値はremの量とvwの量を足したもので、たとえばclamp(1rem, 0.9091rem + 0.4545vw, 1.25rem)のようになります。これをカスタムプロパティに入れ、必要な場所でfont-size: var(--text-base)と書いてください。

CSSでレスポンシブなフォントサイズにするにはどうすればよいですか?

サイズをclamp()の変数として一度宣言しておけば、メディアクエリなしで、ウィンドウ幅に合わせて文字が連続的に変わります。「最小ビューポート」と「最大ビューポート」に最小サイズと最大サイズにしたい幅を設定し、「最小の基準サイズ」と「最大の基準サイズ」を入力して、CSSをコピーします。最小ビューポートより狭い画面では最小サイズのまま、最大ビューポートより広い画面では最大サイズのままです。

CSSのclamp()のフォントサイズが効かないのはなぜですか?

よくある原因は、値の単位がない、clamp()の中のプラス記号の前後に空白がない、最小値が最大値より大きい、推奨値がvwだけで書かれていてユーザーのフォントサイズ設定を無視している、のどれかです。生成される行はこの4つをすべて避けています。すべての値に単位が付き、プラス記号の前後に空白があり、最小値は必ず最大値より小さくなります。

Utopiaのfluid type scale calculatorと同じように使えますか?

考え方は同じで、狭いビューポートと広いビューポートの間でサイズを直線的に補間し、各ステップは基準サイズにスケール比を掛けた値になります。違いは、このツールはスケール比が両端で1つだけであること、ステップごとの上書きがないこと、Tailwindなどへの書き出しがなく、素のCSSカスタムプロパティだけを出力することです。:rootのブロックをすばやく作りたいときに向いています。

長3度と完全4度では、どのスケール比を選べばよいですか?

長3度(1.25)は本文の多いページに向いた標準的な値で、ステップの間隔が近いため、見出しが本文より極端に大きくなりません。完全4度(1.333)はステップ間の差が大きく、宣伝ページや大きな見出しに合います。短3度(1.2)はさらにやわらかい印象です。「スケール比」に数値を入力し、コピーする前に「プレビュー」で確認してください。

clamp()はすべてのブラウザーで使えますか?

clamp()は、Chrome、Edge、Firefox、Safariの現行バージョンのすべてで、2020年から使えます。とても古いブラウザーは理解できない宣言を無視するので、対応が必要な場合は、clamp()の行の前に固定のfont-sizeの行を代替として置いてください。

入力した内容はサーバーに送信されますか?

いいえ。数値はこのページ上でブラウザーがCSSに変換するだけで、アップロードも保存もされません。アカウントも登録も不要です。

おすすめ

無料でツールを続ける支えになります。✨

画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。

関連ツール

CSSボタンジェネレーター

ボタンをデザインしHTML/CSS/Tailwindコードをコピー

ファビコン生成

画像からファビコン、アイコン、manifest作成

コードフォーマッター

JS、JSON、HTML、CSS、Pythonコードを整形

アプリスクリーンショット作成器

App Store・Playストア用の枠付き画像を生成

CSS自動ベンダープレフィックス付与

CSSを貼り付けてベンダープレフィックスを自動付与。無料。