CSS clamp() ジェネレーター
最小・最大のサイズと画面幅から、レスポンシブに変化する clamp() を自動計算。フォントサイズや余白に使えます。
画面幅ごとのプレビュー
見出しのサンプルテキスト The quick brown fox
| 画面幅 | サイズ（px） | サイズ（rem） |
|---|
タイプスケールを一括生成（CSS変数）
画面幅の範囲は上の「最小画面幅・最大画面幅」を使います。step 0 が本文、正の数が見出し、負の数が小さい文字です。
よくある質問
CSSのclamp()とは何ですか？ +
clamp(最小値, 推奨値, 最大値) は、推奨値を最小値と最大値の範囲に収めるCSS関数です。推奨値に 1rem + 2vw のような画面幅に比例する値を入れると、スマホでは小さく・PCでは大きく、なめらかにサイズが変わる「フルイドタイポグラフィ」を1行で書けます。主要ブラウザすべてで利用できます。
推奨値（真ん中の値）はどう計算していますか？ +
「最小画面幅で最小サイズ」「最大画面幅で最大サイズ」になる一次関数を求めています。傾き ＝ (最大サイズ − 最小サイズ) ÷ (最大画面幅 − 最小画面幅)、切片 ＝ 最小サイズ − 傾き × 最小画面幅 とし、推奨値を「切片(rem) + 傾き×100 vw」の形で出力します。
なぜ推奨値にremを混ぜるのですか？ +
vwだけで指定すると、ブラウザの文字サイズ設定やズームを変えても文字が大きくならず、アクセシビリティ上の問題（WCAG 1.4.4）になります。rem＋vwの形にすることで、ユーザーの文字サイズ設定にもある程度追従させられます。最大値が最小値の2.5倍を超えるとズーム時に問題が出やすいため、ツール上で注意を表示します。
フォントサイズ以外にも使えますか？ +
はい。padding・margin・gap・width など長さを指定するプロパティならどれにでも使えます。セクションの余白を画面幅に合わせて広げたいときなどにも便利です。
入力内容は送信されますか？ +
いいえ。計算はすべてお使いのブラウザ内で行い、入力した値がサーバーに送信されることはありません。
特徴
px入力でclamp()を自動生成
デザインカンプのpx値と画面幅を入れるだけで、rem＋vwの推奨値を含むclamp()が完成します。
スライダーで見え方を確認
画面幅を動かして、実際に何pxになるかをプレビュー。主要ブレークポイントの一覧表つき。
タイプスケールを一括出力
本文サイズと比率から、見出し〜小さい文字までのclamp()をCSS変数でまとめて生成します。
アクセシビリティにも配慮
vw単独ではなくremを組み合わせた式を出力し、ズームで問題が出やすい設定には注意を表示します。
使い方
-
1
サイズを入力
スマホで使いたい最小サイズと、PCで使いたい最大サイズをpxで入力します。
-
2
画面幅を指定
サイズが変化し始める画面幅（例: 375px）と最大になる画面幅（例: 1280px）を入力します。
-
3
コピーして貼り付け
生成されたclamp()をコピーしてCSSへ。プレビューで各画面幅のサイズも確認できます。
こんな場面で使えます
見出しのレスポンシブ対応
メディアクエリを何段も書かずに、h1〜h3のサイズを画面幅になめらかに合わせられます。
セクション余白の可変化
paddingやgapに使えば、スマホでは詰めて・PCではゆったりしたレイアウトを1行で実現。
デザインシステムの構築
タイプスケールをCSS変数として出力し、Tailwindや独自のデザイントークンに組み込めます。
安全性とプライバシー
入力内容はブラウザ内だけで処理
入力した数値はサーバーに送信されず、履歴も残りません。
登録不要・無料
会員登録なしで何度でも無料で使えます。通信はHTTPSで暗号化されています。
同じカテゴリのツール
他のツールもチェックJSON整形・バリデーター
JSONを整形（プリティ）・圧縮（ミニファイ）・構文チェック。エラー箇所も表示。ブラウザ内処理でサーバー送信なし。
Base64 / URLエンコード変換
Base64エンコード・デコード、URLエンコード・デコードの相互変換。日本語(UTF-8)対応・ブラウザ内処理。
UNIXタイムスタンプ変換
UNIX時刻⇄日時を相互変換。秒／ミリ秒の自動判定、ローカル／UTC表示、現在時刻のリアルタイム表示に対応。
ハッシュ値計算ツール
テキスト・ファイルからMD5/SHA-1/SHA-256/SHA-384/SHA-512を無料計算。チェックサム照合にも対応。ブラウザ内処理でサーバー送信なし。
JWTデコーダー
JWT（JSON Web Token）を貼り付けるだけでヘッダー・ペイロードを無料デコード。有効期限の判定つき。ブラウザ内処理でサーバー送信なし。
正規表現テスター
正規表現をリアルタイムでテスト。マッチ箇所のハイライト・グループ表示・置換結果まで無料で確認できます。
カラーコード変換ツール
HEX・RGB・HSL・HSB・CMYKを無料で相互変換。カラーピッカー・ランダム生成・配色パレット表示にも対応。ブラウザ内処理でサーバー送信なし。
UUID生成・検証ツール
UUID v4をワンクリックで複数生成。書式変更・コピー・ダウンロードに対応。既存UUIDのバージョン・フォーマット検証も無料でできます。
テキスト差分比較ツール
2つのテキストの追加・削除された行を無料でハイライト表示。空白・大文字小文字を無視するオプション、一致率表示にも対応。ブラウザ内処理でサーバー送信なし。
Cron式デコーダー
Cron式を日本語の説明文と次回実行時刻に無料変換。日・曜日のOR条件にも対応し、フィールドごとの意味を内訳表示。ブラウザ内処理でサーバー送信なし。
Markdownプレビュー・HTML変換ツール
Markdownをリアルタイムでプレビュー表示し、HTMLに無料変換。見出し・リスト・表・コードブロックに対応。ブラウザ内処理でサーバー送信なし。
進数変換ツール（2進数・8進数・10進数・16進数）
10進数・2進数・8進数・16進数をリアルタイムで相互変換。任意の2〜36進数変換、AND/OR/XOR/NOT/ビットシフトなどのビット演算にも対応。ブラウザ内処理でサーバー送信なし。
CSV⇔JSON変換ツール
CSV（TSV・セミコロン区切りも対応）とJSONを無料で相互変換。RFC4180準拠のクォート処理、見出し行の有無、区切り文字の自動判定に対応。ブラウザ内処理でサーバー送信なし。
命名規則変換ツール（camelCase・snake_case）
文字列をcamelCase・PascalCase・snake_case・kebab-case・CONSTANT_CASEなど11種類の命名規則に無料で一括変換。略語混じりの識別子にも対応。ブラウザ内処理でサーバー送信なし。
サブネット計算ツール（CIDR / IPv4）
IPアドレスとCIDR/サブネットマスクからネットワークアドレス・ブロードキャストアドレス・使用可能ホスト数・アドレス範囲を無料計算。サブネット分割にも対応。ブラウザ内処理でサーバー送信なし。
chmod計算ツール（パーミッション変換）
Linuxのパーミッションをチェックで選ぶだけで数値（755/644）⇔記号（rwxr-xr-x）を相互変換。setuid・setgid・スティッキービット対応、ls -l 表示の逆算、chmodコマンド生成も可能。
URLパラメータ解析・生成ツール
URLをプロトコル・ホスト・パス・クエリパラメータ・フラグメントに無料で分解。パラメータの追加・編集・削除でURLを即座に再生成し、JSONとしてもコピーできます。ブラウザ内処理でサーバー送信なし。
YAML⇔JSON変換ツール
YAMLとJSONを無料で相互変換。Kubernetes・Docker Compose・GitHub Actionsの設定ファイルもそのまま変換でき、構文エラー箇所も表示。インデント幅の変更にも対応。ブラウザ内処理でサーバー送信なし。
Markdownテーブル生成ツール
CSV/TSVの貼り付けやセル編集からMarkdownの表を無料生成。列ごとの左揃え・中央揃え・右揃え、桁揃え整形、プレビュー表示に対応。ブラウザ内処理でサーバー送信なし。
HTML Markdown 変換
HTMLをMarkdownに無料変換。表（GFMテーブル）・入れ子リスト・チェックボックス・コードブロック（言語名つき）・引用・リンク・画像に対応。WebページやGoogleドキュメントからコピーしたリッチテキストを貼り付けるだけで変換でき、.md保存も可能。
カラーコントラストチェッカー（WCAG）
文字色と背景色のコントラスト比を無料で計算し、WCAG 2.1のAA/AAA基準（通常テキスト・大きな文字・UI部品）を満たすか判定。カラーピッカー・色の入れ替え・プレビュー表示に対応。ブラウザ内処理でサーバー送信なし。
px rem 変換ツール
CSSのpxとremを基準フォントサイズを指定して相互変換。px・rem・em・pt・%・vwを双方向に換算し、CSSを貼り付けてpx指定をまとめてremに一括変換。1pxボーダー除外・早見表つき。
SQL整形ツール（SQLフォーマッター）
SQL文を無料でインデント付きに整形、または1行に圧縮。SELECT・JOIN・WHERE・INSERT・UPDATE・DELETEなど主要な構文に対応し、キーワードの大文字化オプションも選べます。ブラウザ内処理でサーバー送信なし。
文字列エスケープ/アンエスケープツール
HTMLエンティティ・JS/JSON文字列・CSVフィールドのエスケープ/アンエスケープを無料で相互変換。日本語・絵文字にも対応。ブラウザ内処理でサーバー送信なし。
JSON差分比較ツール
2つのJSONを貼り付けるだけで、キーの追加・削除・値の変更を階層構造ごと自動検出。APIレスポンスや設定ファイルの比較に。パスごとの差分一覧・一致判定・結果コピーに対応。
JSON→TypeScript型定義変換ツール
JSONを貼り付けるだけでTypeScriptのinterface/type定義を無料で自動生成。ネストしたオブジェクト・配列にも対応。ブラウザ内処理でサーバー送信なし。
ユーザーエージェント解析ツール
UA文字列を貼り付けるだけでブラウザ・OS・レンダリングエンジン・デバイス種別を無料で自動解析。自分のUAもワンクリック取得。ブラウザ内処理でサーバー送信なし。
画像⇄Base64変換ツール
画像をドラッグ＆ドロップでBase64・Data URIに無料変換。Base64文字列から画像への復元にも対応。imgタグ・CSS背景コードもコピー可能。
ダミーデータ生成ツール
氏名・メール・電話番号・住所・会社名などの架空のテストデータをまとめて無料生成。出力項目を選んでJSON・CSVでコピー・ダウンロードできます。