CSS の Clamp() 関数、CSSの好きな関数No.1じゃなかろうかというくらい好き。でも自分で計算するのはイヤなので、数あるジェネレーターの中から Modern fluid typography editor を愛用＆依存していたんですが、便利なサイトほど突然消えたりしませんか…？GitHubからクローンしてローカルで動かしてる？やだめんどい…
ということで、スプレッドシートで電卓化しました。計算はなんだかんだで表計算がラク。ご自身のGoogleドライブに保存してご利用ください。これでサイト消滅の不安とさようなら！
Clamp関数電卓の特徴
主な特徴は次の3点。
- 画面サイズに応じて変化する数値をリストアップ
- 変化の具合を微調整するため調整値
remとpxの両方を生成
1, 2 は Modern fluid typography editor を愛用していた最大の理由。というか変化の具合、デザインする時に見たくなりません？意図しないレイアウト崩れが気になりません？機械による自動化は最高ですけど、それは制御下にあるからだ！ボスは俺だ！って思いません？多くのジェネレーターは「画面サイズを動かして確認してね」で、実際それもするから理にかなってるんですが、変化の具合を可視化したくありません？そんな恐らくニッチなのだろうワガママを満たします。
3 は、フォント以外にも使うことありません？画像とかに。いくらレスポンシブでも、ピクセル指定はまだまだ必要なはず…ですよね？ そんな時に rem をいちいち px に換算するの、イヤじゃありません？私はイヤです。ということで両方生成させています。
動作画面
生成コードは上が rem、下が px。他にも一部の文字が切れているかもしれませんが、実際は表示されます。
使い方
- 次のURLからスプレッドシートを表示後「ファイル→コピーを作成」を実行して、自分のドライブに保存します。
https://docs.google.com/spreadsheets/d/1Jemjpe7-Bh-QCVdCZk_Z9AIPrml6g8Rwjux3dpcYfHI/edit?usp=sharing - コピーしたファイルを開き、数値をそれぞれ変更します。変更可能箇所は次の通り。
- 最小値
- 最大値
- 最小値になる画面サイズ
- 調整値（不要な場合は
0または空欄に） - 出力サイズ一覧の画面サイズ
- 最後に、生成されたコードをコピーすれば完了です。
ポイント
- 数値の単位は全て
pxです。 - 上記の変更可能箇所以外のセルを変更する際は、関数入りのセルもありますのでご注意ください。
- 画面サイズの数は増減可能です。ただしその際は「出力サイズ」「実際の値」の列の関数もコピーし、グラフの設定も変更してください。
- 出力サイズは、数値を把握しやすくするために小数点以下を切り上げた数値です。ご不要な方は削除し、グラフのX軸を実際の値に変更してください。
仕様
- 推奨値と実際の値は
ROUNDDOWNで小数点以下を2桁までに制限しています。 - 出力サイズ一覧の画面サイズと出力サイズは、「表示形式の詳細設定」で
pxを表示するようにしています。 - 出力サイズは
ROUNDUPで小数点以下を切り上げています。