カラーコード変換
HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。
CSS clamp 流動フォントサイズ計算
文字サイズとビューポート幅の上下限から、px・rem 対応の font-size: clamp() を作成します。
rem は指定したルートサイズで計算します。実際のページでは、ブラウザーのズームや文字拡大時の表示も確認してください。
読みやすい文字サイズで、言葉がすっと伝わる。
CSS
このツールについて
モバイルとデスクトップの見出しサイズを決め、中間の変化も確認できます。
使い方
最小・最大フォントサイズと、それぞれに対応するビューポート幅を入力します。px または rem を選び、幅のシミュレーションで計算結果を確認して CSS をコピー・保存します。幅は小さい順、最小文字サイズは最大値以下にしてください。
指定した幅の間では文字が線形に拡大し、範囲外では上下限に収まります。rem を使う場合は、ルートの文字サイズを実際のページに合わせてください。式の基準はコンテナー幅ではなくビューポート幅で、他の組版設定は変更しません。
よくある質問
rem のルートサイズを指定する理由は？
プレビューで rem をピクセルに換算するためです。ルート要素の文字サイズを実際のページに合わせてください。式はブラウザーのビューポート幅に応じて変化し、ルート要素の文字サイズが違うと結果も変わります。
スマートフォンで 16px、デスクトップで 32px にする設定例は？
画面幅 400px で 16px、1200px で 32px にするなら、px を選んでその二組を入力します。clamp(16px, 8px + 2vw, 32px) となり、800px では 24px、指定範囲外では上下限を保ちます。基準はコンテナー幅ではなくビューポート幅です。
関連ツール
新しいタブで開きます
コメント
0