当サイトは
登録不要・完全無料で
ブラウザ上からすぐに使える
各種便利ツールを提供しています

CSS clamp計算ツール【自動計算】/最小・最大フォントサイズ(px)からレスポンシブ対応のCSSを自動生成

 

🔠 ツールの概要と使い方
画面幅に合わせてフォントサイズをなめらかに伸縮させる、CSSの「clamp()」関数のコードを自動生成するツールです。
メディアクエリ(@media)を使わずに、スマホからPCまで画面サイズに応じた可変フォントサイズ(流動的タイポグラフィ)を実現できます。

【使用手順】
1. 「最小文字サイズ」と「最大文字サイズ」をpx単位で入力します。
2. 文字サイズの変化を開始する「最小画面幅」(例: 375px)と、終了する「最大画面幅」(例: 1200px)を入力します。
3. 必要に応じて「ルートフォントサイズ」を入力します(通常は16pxのままでOK)。
4. 「生成されたCSS (clamp)」欄にコードが自動表示されるので、「結果をコピー」ボタンを押してCSSファイルに貼り付けてご使用ください。

【ポイント】
・最小画面幅より狭い画面では最小文字サイズ、最大画面幅より広い画面では最大文字サイズで固定されます。
・入力内容に誤りがある場合は、赤字でお知らせします(例: 最小サイズが最大サイズより大きい場合)。
・余白や幅などに使いたい場合は、コピーした「clamp(…)」の部分だけを、任意のプロパティに指定してください。

 

※ 本ツールの計算結果に関する注意点や、ご利用にあたっての条件は[免責事項]をご確認ください。