カテゴリー: 開発ツール
CSS clamp ジェネレーター
メディアクエリなしの流動的な文字サイズ
最小と最大のサイズ、そして対応するビューポート幅を指定すると、その間をなめらかに変化する clamp() 宣言と、代表的な幅での描画サイズの表が得られます。
出力
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| ビューポート幅 | 描画サイズ |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
プレビュー
流動的な文字サイズはスマートフォンでも読みやすく、デスクトップでも比率を保ちます。
宣言はページ内で組み立てられます。何もアップロードされません。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
clamp() は、見出しを4段階に切り替えていたメディアクエリの積み重ねを置き換えました。厄介なのは中央の項で、指定した2点を通る直線、すなわち傾き×ビューポート＋切片を、vw の値と rem の値の和として書く必要があります。その計算をここで行います。上下の境界は rem のままなので、既定の文字サイズを大きくしている人にはやはり大きな文字が届きます。表には 360、768、1024、1280、1600 ピクセルでブラウザが実際に描くサイズが並ぶので、変化の様子を目で確かめられます。同じ値は余白や間隔にも使えます。
使い方
- 最小サイズと、それが適用されるビューポート幅を入力します。
- 最大サイズと、そこで成長が止まる幅を入力します。
- clamp() 宣言をコピーし、プレビュー表を確認します。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 境界がなぜ px ではなく rem なのですか。
- ビューポート単位だけで書いたサイズはブラウザの文字サイズ設定を無視してしまい、アクセシビリティ上の欠陥になります。rem の境界なら利用者自身の既定値に追随します。
- 余白の指定にも使えますか。
- 使えます。値は単なる長さなので、padding、margin、gap、width など長さを取るプロパティすべてで機能します。
- サーバーに何か送信されますか。
- いいえ。宣言は入力した数値からページ内で計算されます。だからこそ即座に更新されます。