画面幅に合わせる文字サイズ
2つの画面幅と文字サイズから、clamp()で使える可変文字サイズを計算します。
使い方
- 小さい画面幅と最小文字サイズ、大きい画面幅と最大文字サイズを入力します。
- 大きい画面幅を小さい画面幅より大きくし、最大文字サイズを最小以上にします。
- font-size宣言を対象のCSSへ貼り、狭い画面と拡大表示で見出しの折り返しを確認します。
このツールが向いている作業
スマホ幅とPC幅で読みやすい文字サイズを決め、その間を連続的につなぐCSSを計算します。ブレークポイントごとに文字サイズを何段階も書き分けたくない見出しに向いています。
入力と設定
結果
入力例と実際の出力
- 小さい画面幅（px）: 360
- 大きい画面幅（px）: 1200
- 最小文字サイズ（px）: 16
- 最大文字サイズ（px）: 32
出力例: font-size: clamp(16px, calc(9.142857px + 1.904762vw), 32px);
この指定では360px以下が16px、1200px以上が32pxで、その中間の780pxでは約24pxになります。プレビューはページ内の要素ですが、vwの基準はプレビュー枠ではなくブラウザの表示幅です。
仕様と注意点
指定した2点を直線でつなぎ、範囲外では最小・最大サイズに固定します。px基準の計算なので、実装先で拡大表示も確認してください。
次の作業・使い分け
ボタンのCSS下ごしらえ — 見出しと合わせる操作ボタンのスタイルを準備できます。
よくある質問
画面幅を同じにできないのはなぜですか？
2点間の幅の差から傾きを計算するためです。幅が同じ場合は補間できません。文字サイズは同じでも使えます。
remでの計算に対応しますか？
この版はpxとvwの組み合わせを出力します。利用者が変更した既定の文字サイズに連動するrem計算ではないため、拡大表示を含む実機確認が必要です。
vwはプレビュー枠の幅を基準にしますか？
vwの基準はブラウザーのビューポート幅です。ページ内のプレビュー枠の幅ではありません。
関連ツール
ツールを紹介
ツール名と公開URLだけを共有します。入力した内容や処理結果は含まれません。