CSS clampジェネレーター
小さい画面と大きい画面の幅・サイズを入力し、文字や余白がなめらかに変わるCSSを生成します。px・remの出力をプレビューし、CSSとTailwind用コードをコピー・テキスト保存できます。
できること
幅とサイズの2組から指定
小さい画面と大きい画面でのサイズを指定。文字サイズ・間隔・内外の余白・幅・高さの6種類に使えます。
pxとremのコードを生成
入力はpxで揃え、出力はpxかremを選択。CSS宣言と、Tailwindの任意プロパティのコードを取得できます。
生成したCSSをその場で確認
プレビュー内の二つの要素へCSSを適用。現在の枠の幅で文字や余白がどう表示されるか確認できます。
使い方
変えたいプロパティを選ぶ
文字の大きさならfont-size、要素間の間隔ならgapなど、指定したいCSSプロパティを選びます。
二つの画面幅とサイズを入力
小さい画面と大きい画面、それぞれの幅とサイズをpxで入力します。小さい側のサイズは大きい側以下にしてください。
出力単位を確認して生成
詳細設定でpxかremを選びます。remは基準フォントサイズも確認してから「CSSを生成」を押してください。
プレビューしてコードを取得
CSSをコピーして使用先へ貼り付けます。Tailwind用コードは開いて取得でき、全2項目の一括コピーやテキスト保存もできます。
こんなときに便利
見出しのサイズをなめらかに変える
狭い画面と広い画面での文字サイズを決め、その間を段階的ではなく連続的に変えたいときに。
画面に合わせて余白を調整する
カード間のgapや内側のpaddingを、決めた最小・最大サイズの範囲で変えたいときに。
可変サイズの指定とプレビューの読み方
clampの3つの値
clampは最小値・可変値・最大値を指定するCSS関数です。生成式では二つの基準点の間を一次式でつなぎ、範囲外では端のサイズに収めます。
入力はpx、出力はpxまたはrem
画面幅もサイズも入力はpxです。rem出力ではサイズと固定部分を基準フォントサイズで割り、画面幅に対するvwの係数はそのまま使います。
remの基準を使用先と合わせる
既定では1remを16pxとしてコードを作ります。使用先のルート要素の文字サイズが異なると、端のサイズや変化のしかたも変わります。使用先でも確認してください。
プレビュー枠が画面幅の基準
プレビューは独立した表示枠です。画面全体の幅ではなく、枠の内側の幅でvwを計算します。プロパティに応じ、文字・二要素の間隔・余白・要素の寸法へ同じ生成CSSを適用します。
利用先での確認も必要
このプレビューの文字列と構成は固定です。利用先のフォント、長い文章、折返し、ブラウザの文字拡大でも確認してください。Tailwindのコードは任意プロパティの形式で、利用先で検出・生成されることも確認します。
よくある質問
指定した画面幅の範囲外ではどうなりますか？
小さい側より狭い幅では最小サイズ、大きい側より広い幅では最大サイズになります。remの場合は、生成時と同じ基準フォントサイズで使うことが前提です。
remの基準フォントサイズは何ですか？
1remを何pxとして計算するかの指定です。既定は16pxで、詳細設定から1〜1000pxへ変更できます。使用先のルート要素の文字サイズに合わせてください。
同じサイズや、負の値を指定できますか？
最小と最大を同じ値にするとサイズを一定にできます。負の値はmarginのみ指定可能です。画面が広いほどサイズが小さくなる指定には対応していません。
プロパティや数値を変更するとすぐ反映されますか？
変更すると生成済みのコードとプレビューを解除します。「CSSを生成」を押して更新してください。出力単位や基準フォントサイズの変更も同じです。
プレビューの文字は変更できますか？
確認用の文章と「Aa 123」の二つは固定です。文字列の編集機能はありません。生成したCSSを使うページでも実際の文章と表示幅を確認してください。
入力と結果
- 画面幅
- 1〜100000px。小さい側の画面幅は大きい側より小さくします。小数も入力できます。
- サイズ
- 0〜10000px。marginのみ−10000pxまで指定可能。小さい側のサイズは大きい側以下にします。
- 出力
- CSS宣言とTailwindの任意プロパティ。全2項目はcss-clamp-generator.txtとして保存できます。
- 精度
- 生成式は最大13有効桁の係数を使います。丸め後の式で基準点を再現できないほど近い幅などはエラーになります。