CSS clamp計算
文字sizeや余白をviewportに合わせて線形変化させるclamp()を、4つのpx値から作ります。
両端を検算できるfluid size
slope×100をvw係数にし、interceptをpxで加えます。最小・最大viewportで元のsizeへ戻る値も表示します。
ツール本体
入力・操作・結果
上から入力し、必要な操作を行って、表示された結果と次の操作を確認してください。
入力データは原則ブラウザ内で処理し、URLやアクセス解析へ保存しません。ページを更新すると入力は失われます。機密情報は入力しないでください。
使い方
- 最小・最大sizeをpxで入れます。
- そのsizeになるviewport widthをpxで指定します。
- 式をcopyし、両端値を確認します。
16px→24pxを320px→1280pxで変化させる式をそのままCSSへ貼れます。
このツールを使う場面
- 確認できること
- fluid typographyやspacing用のclamp式を4つのpx値から作れます。
- 使う前に見るポイント
- sizeの下限上限と、それぞれになるviewport widthを決めます。
- 結果を見たあとにやること
- endpoint検算値と実browser layoutを確認してCSSへ採用します。
つまずきやすいポイント
viewportの大小を逆にする
maximum widthはminimumより大きくします。
remのrootを暗黙にする
初期版はpxに限定します。
境界値・事前チェック項目
同じsize
係数0の一定値になります。
小数
内部計算後に読みやすい6桁へ整えます。
よくあるミスと回避策
vwだけを使う
interceptを含むcalcで両端を通します。
検算しない
表示するendpointを入力値と照合します。
FAQ
font-size以外にも使えますか？
CSSでlengthを取るpropertyなら検討できますが、実際のlayoutを確認してください。
どの式をcopyしますか？
result欄のclamp(min, calc(...), max)全体です。
基本FAQ
入力データは外部へ送信されますか？
原則として送信されません。入力内容はブラウザ内で処理し、URLやアクセス解析へ保存しません。例外がある場合は各ツールページ内に明記しています。
入力内容は自動保存されますか？
原則として自動保存しません。ページを更新すると入力は失われます。コピーやダウンロードで保存する場合は、ご利用端末内に保存されます。
結果を使う前に何を確認すべきですか？
対象年度・入力前提・提出先ルールを先に確認してください。必要に応じて公式情報や担当窓口で最終確認する運用を推奨します。
関連ツール
同じ作業の前後で使うことがあるツールです。