CSSフルード・タイポグラフィ・ジェネレータ
ビューポートの最小幅と最大幅の間でフォントサイズを滑らかに補間するCSS clamp()型スケール(XS～4XL)を生成します。ライブリサイズ可能なプレビューと基礎となる補間計算式が表示されます。ブラウザで完全に動作します。
入力
最小ビューポート幅での基本フォントサイズ。
最大ビューポット幅での基本フォントサイズ。
この幅より下では、フォントサイズは最小サイズに固定されます。
この幅より上では、フォントサイズは最大サイズに固定されます。
最小ビューポット幅で各ステップが前のステップに対してどの程度成長するか。
最大ビューポット幅で各ステップが前のステップに対してどの程度成長するか。
オフにすると、代わりに単純な.text-xs / .text-base / …ユーティリティクラスブロックが出力されます。
出力
Your type scale will appear here.
分離されたShadow DOM内の実際のclamp()ルール — ブラウザウィンドウをリサイズするとリアルタイムでスケーリングされます。
| ステップ | 最小 | 最大 | clamp() |
|---|---|---|---|
| No data yet | |||
上のライブプレビューがレンダリングするデモマークアップ — 各ステップのサンプルテキスト。そのままコピー&ペーストするものではありません。
上のライブプレビューを動作させるもの — CSS出力と同じclamp()ルール。デモマークアップのクラスに適用されています。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-fluid-typography-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"minFontSize": "16",
"maxFontSize": "20",
"minViewport": "320",
"maxViewport": "1200",
"minRatio": "1.2",
"maxRatio": "1.25",
"outputUnit": "rem",
"asCustomProperties": "true"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-fluid-typography-generator` tool (CSS Fluid Typography Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-fluid-typography-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSフルード・タイポグラフィ・ジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
機能説明
固定的なfont-sizeメディアクエリのブレークポイントでは、テキストが限定された幅で急激に変化します。フルードタイポグラフィはビューポットのリサイズに応じてフォントサイズを連続的にスケーリングし、CSSのclamp()を使って最小サイズと最大サイズの間に結果を制限します。このツールは2つのフォントサイズ、2つのビューポット幅、各端での스케일比率から、完全な8ステップの型スケール(XS～4XL)をclamp()ルールとして生成します。固定ブレークポイントはなく、急激な変化もありません。
使い方
- 最小フォントサイズと最小ビューポット幅を設定します。これはテキストが縮小を止める基本フォントサイズです。
- 最大フォントサイズと最大ビューポット幅を設定します。これはテキストが拡大を止める基本サイズです。
- 各端にスケール比率(短三度、長三度、完全四度など)を選択します。各ステップ(SM → 基本 → LG → XLなど)が前のステップに対してどの程度成長するかを決定します。各端で異なる比率を使用することで、スクリーンが広がるにつれて見出しが本文テキストより速く拡大でき、これはフルード型システムで一般的です。
- 出力にremまたはpxを選択し、CSSカスタムプロパティ(
--font-base: clamp(...))または単純なユーティリティクラス(.text-base { font-size: clamp(...); })を出力するかを選択します。 - CSS出力をスタイルシートに直接コピーします。
ライブプレビューは生成されたclamp()ルールを分離されたShadow DOM内に実装します。実際のブラウザウィンドウをリサイズするとサンプルテキストがリアルタイムでスケーリングされ、サイト上での動作そのままです。
計算式
各ステップのclamp()は標準的な線形補間公式から構築されます:slope = (maxSize − minSize) / (maxViewport − minViewport)、その後preferred = (minSize − minViewport × slope) + slope × 100vw。このpreferred値はビューポット幅と共に線形に成長し、clamp(minSize, preferred, maxSize)で制限されるため、結果はminViewportでminSizeと正確に一致し、maxViewportでmaxSizeと正確に一致し、その間でスムーズに補間されます。最小ビューポット幅より下またはビューポット幅より上では、サイズは対応する境界に固定されたままです。型スケール分解表には、計算された最小値/最大値と各ステップの結果的なclamp()文字列が表示されます。
なぜメディアクエリだけを使わないのか?
メディアクエリは1つの固定ピクセル幅でfont-sizeを変更するため、ブレークポイントを超えた瞬間にテキストが急変します。clamp()ベースのフルードタイポグラフィはあなたの2つのブレークポイント間の全範囲で連続的にスケーリングされるため、目立つ急変がなく、各デバイスに合わせて正しく選択するべきブレークポイントも存在しません。
すべてのブラウザで動作しますか?
clamp()とvwユニットは2020年以降すべての主要ブラウザでサポートされているため、CSSカスタムプロパティより前の非常に古いブラウザを除いて、どこでも動作します。
関連ツール
サイズを別の方向に変換しますか? ピクセル、REM & EM コンバーターを使用して、単一の値を単位間で変換します。ブレークポイントベース(フルードではない)のレスポンシブルールについては、CSS メディアクエリ ジェネレータを参照してください。このと同じスタイルの対話的なイージング曲線ビルダーについては、CSS キュービック ベジェ ジェネレータを参照してください。
プライバシー
すべてはブラウザで実行されます。フォントサイズや設定はサーバーに送信されません。