デザイン / レスポンシブ
流動的なタイポグラフィと余白のためのCSS Clamp()ジェネレーター
最小・最大サイズと、それぞれを適用するビューポート幅を入力すると、両者の間で滑らかに拡大縮小するrem単位のclamp()式を取得できます。一般的な画面幅でのサイズも表で確認できます。
流動的なタイポグラフィと余白のためのCSS Clamp()ジェネレーター: このツールは2つの点を通る直線を描きます。320 pxのビューポートで16 px、1280 pxで24 pxの場合、幅が100 px増えるごとにサイズは0.8333 px大きくなります。この直線は固定のrem部分とvw部分、0.8333rem + 0.8333vwとして記述され、clamp()によってその範囲外では1remから1.5remの間に収まります。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| ビューポート幅 | サイズ |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 800 px | 20 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
clamp()の中央の値は、指定した2点を通る直線です。ビューポート幅の一部に固定のrem量を加えることで、2つの幅の間ではサイズが滑らかに変化し、その外側では上限または下限で止まります。固定部分にremを使うと、読み手自身のフォントサイズ設定に応じてサイズを変化させられます。フォントサイズ、パディング、ギャップ、マージンなど、あらゆる長さに使用できます。
計算例
375 pxのスマートフォンで32 px、1440 pxのデスクトップで48 pxになる見出しの場合、傾きは16 ÷ 1065 = 1.5023 px per 100 pxで、式はclamp(2rem, 1.6479rem + 1.5023vw, 3rem)です。800 pxのタブレットでは、見出しは38.38 pxになります。
アクセシビリティ
WCAGでは、テキストを200%まで拡大できることが求められています。流動的なサイズの一部はビューポートに依存するため、傾きが急すぎると、ズームしてもテキストが十分に大きくならない場合があります。最大サイズは最小サイズの約2.5倍以内に抑え、一定したステップを選ぶにはタイプスケールジェネレーターを使用してください。
使い方
- 最小サイズと最大サイズをpx単位で入力します。
- それぞれを適用するビューポート幅を入力します。
- clamp()の値をコピーし、表でサイズを確認します。
プライバシーと制限事項
ブラウザ内で計算されます。
関連ツール
よくある質問
vwだけを使わないのはなぜですか？
vwだけで指定したサイズは、読者のフォントサイズ設定を無視し、スマートフォンでは小さくなりすぎたり、幅の広い画面では大きくなりすぎたりすることがあります。rem部分とclamp()の上限・下限によって、その両方を防げます。
clamp()はどのブラウザでも動作しますか？
はい。現在使われているすべてのブラウザが、2020年以降clamp()をサポートしています。
画面幅が広くなるほどサイズを小さくできますか？
はい。最小幅のサイズをより大きく入力すると、代わりに式からvw部分が引かれます。
無料ツール · ブラウザ内で · アカウント不要