Loading...
CSS clamp() を用いて、フォントサイズ・行間・余白をレスポンシブ設計。プレビューと実寸pxを確認しながらCSSを生成できます。
CSS clamp() を用いて、フォントサイズ・行間・余白をレスポンシブ設計。プレビューと実寸pxを確認しながらCSSを生成できます。
生成されたCSS clamp()をそのままスタイルシートにコピーして利用できます。
/* Responsive Clamp CSS */
/* Viewport: 375px ~ 1440px */
.responsive-text {
/* フォントサイズ: 16px → 24px */
font-size: clamp(1.0000rem, 0.8239rem + 0.7512vw, 1.5000rem);
/* 行間: 1.5 → 1.8 */
line-height: clamp(1.50, 1.3944 + 0.028169vw, 1.80);
}
.responsive-spacing {
/* 余白: 16px → 48px */
padding: clamp(1.0000rem, 0.2958rem + 3.0047vw, 3.0000rem);
/* または margin, gap など */
}生成されたCSS clamp()をそのままスタイルシートにコピーして利用できます。
/* Responsive Clamp CSS */
/* Viewport: 375px ~ 1440px */
.responsive-text {
/* フォントサイズ: 16px → 24px */
font-size: clamp(1.0000rem, 0.8239rem + 0.7512vw, 1.5000rem);
/* 行間: 1.5 → 1.8 */
line-height: clamp(1.50, 1.3944 + 0.028169vw, 1.80);
}
.responsive-spacing {
/* 余白: 16px → 48px */
padding: clamp(1.0000rem, 0.2958rem + 3.0047vw, 3.0000rem);
/* または margin, gap など */
}このレスポンシブクランプジェネレーターでは、フォントサイズ・行間・余白の最小値と最大値を入力するだけで、 CSS clamp()関数を用いた流動的なスタイル定義を自動生成できます。
clamp()を使うことで、メディアクエリを複数書くことなく、ビューポート幅に応じてスムーズにスケーリングする レスポンシブデザインを実現できます。モバイルからデスクトップまで一貫した視覚体験を提供するために活用できます。
プレビュー機能では任意の幅でリアルタイムに実寸値を確認でき、rem/px両方の出力形式に対応しています。