CSS clamp() 生成
最小・最大サイズとビューポート範囲からレスポンシブなclamp()コードを生成します。メディアクエリなしでフォントサイズが画面幅に応じて滑らかに変わるfluid typographyに使えます。すべてブラウザ内で処理されます。
- clamp() 値
- clamp(1rem, 0.884vw + 0.7928rem, 1.5rem)
- 使用例
- font-size: clamp(1rem, 0.884vw + 0.7928rem, 1.5rem);
よくある質問
clamp()는 어떻게 동작하나요?
clamp(최솟값, 선호값, 최댓값)은 선호값을 사용하되 범위를 벗어나지 않게 고정합니다. 선호값을 'vw + rem' 형태의 일차식으로 두면 뷰포트 폭에 비례해 크기가 변합니다.
vw 계수와 rem 절편은 어떻게 계산되나요?
두 점 (최소 뷰포트, 최소 크기)와 (최대 뷰포트, 최대 크기)를 지나는 직선의 기울기와 절편입니다. 기울기 × 100이 vw 계수가 되고 절편은 16px = 1rem으로 환산합니다.
rem을 쓰는 이유는 무엇인가요?
사용자가 브라우저 기본 글꼴 크기를 키웠을 때 함께 커지도록 하기 위해서입니다. 순수 vw만 쓰면 브라우저 확대·접근성 설정이 무시되어 WCAG 위반이 될 수 있습니다.
関連ツール
px・rem・em・pt・% を基準フォントサイズに合わせて相互変換します。レスポンシブタイポグラフィに便利で、すべてブラウザ内で処理されます。
オフセット・ぼかし・広がり・色・不透明度を調整してCSS box-shadowコードを作り、リアルタイムプレビューで確認できます。insetにも対応し、すべてブラウザ内で処理されます。
2つの色と角度からCSS linear-gradient・radial-gradientコードを作り、リアルタイムプレビューで確認できます。中間色情報も提供し、すべてブラウザ内で処理されます。
テキストと背景色のコントラスト比を計算し、WCAG 2.x AA・AAAアクセシビリティ基準の合否を判定します。すべてブラウザ内で処理されます。
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
基準色から明るいトーンと暗いトーンのHEXパレットを生成します。デザインシステムの色階調づくりに便利で、処理はすべてブラウザ内で行われます。