🧰業務効率化
CSS clamp()・レスポンシブサイズ計算
画面幅に応じて変化するCSSサイズを生成
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
最小・最大サイズと、そのサイズに到達する画面幅を入力すると、滑らかに変化するCSSのclamp()を作成できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. サイズと画面幅を入力
2. CSSコード
rem版は指定したルート文字サイズを前提に計算します。サイト側のhtmlの文字サイズが異なる場合は、ルート文字サイズを合わせてください。
3. 画面幅ごとの値を確認
画面幅に応じて滑らかに変化するサンプルです。
| 画面幅 | 計算後サイズ | 状態 |
|---|
計算の考え方と注意点
clamp(最小値, 推奨値, 最大値)として、指定した2つの画面幅の間を直線的に変化させます。最小画面幅以下では最小値、最大画面幅以上では最大値になります。
- 生成後は、実際の文章量・日本語フォント・端末幅で改行やはみ出しを確認してください。
- 文字サイズに使う場合は、ブラウザーの文字拡大やユーザー設定を妨げないことも確認してください。
- 極端な最小値・最大値は避け、デザイン全体の余白や行間と一緒に調整してください。