WEB CRAFT LAB

CSS文字サイズシミュレーター

β版について
px
px
px
px
画面幅 760px
文字サイズ 21.0px
360px 1200px
固定区間 可変区間（clampが効く範囲）
プレビュー内の見出し・本文・ボタンをクリックすると、そのサイズを操作できます。
HomeBlogお問い合わせ

TUTORIAL

文字サイズシミュレーター

最小値と最大値を決めるだけで、clamp() を自動生成します。

現在サイズを操作中の要素：見出し

生成されたCSS

px

FAQ

clamp() って何？
clamp(最小値, 変化する値, 最大値) は「最小」と「最大」の間で、真ん中の値を自動的に採用するCSS関数です。画面幅が狭ければ最小値、広ければ最大値に固定され、その間だけ滑らかに変化します。
真ん中の値はどうやって決まるの？
「画面幅が1px広がるごとに文字サイズが何px増えるか」という傾きと、「画面幅0pxのときの理論上の文字サイズ」という切片から計算します。これは中学校で習う一次関数 y = ax + b と同じ考え方です。
今の設定だと、実際どんな計算式になるの？