最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
Post on:2023年2月7日
sponsors
フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。
たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。
CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。
clamp() Calculatorの特徴
流体タイポグラフィ（Fluid Typography）は、フォントのサイズをレスポンシブ対応にする最新のテクニックです。さまざまなビューポートサイズに応じてメディアクエリで固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でビューポートサイズに応じた最適な値をレンダリングさせることができます。
|
1 2 3 |
p{ font-size: clamp(1rem, 0.5rem + 1.6vw, 1.5rem); } |
このたった1行のCSSで、下記のように表示されます。
※ルート要素が、16pxの場合
- 360pxのスクリーン: 1rem 16px
- 480pxのスクリーン: 1rem 16px
- 768pxのスクリーン: 1.25rem 20px
- 980pxのスクリーン: 1.5rem 24px
- 1280pxのスクリーン: 1.5rem 24px
clamp() Calculatorは、このCSSをカスタマイズして簡単に生成できます。
CSSのclamp()関数について詳しくは、下記をご覧ください。
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
clamp() Calculatorの使い方
使い方は、簡単です
フォントサイズの最小値と最大値を設定し、ビューポートサイズの最小値と最大値を設定し、「Calculate!」ボタンをクリックするだけで、clamp()関数のCSSを生成できます。
フォントサイズに16, 24を設定し、ビューポートサイズに500, 1000を設定すると、下記のCSSが生成されます。
|
1 |
clamp(1rem, 0.5rem + 1.6vw, 1.5rem) |
clamp()の値は、下記の通りです。
|
1 |
clamp(fontSizeMin, Yrem + Zvw, fontSizeMax) |
- fontSizeMin: フォントサイズの最小値
- X: (fontSizeMax - fontSizeMin) / (viewportWidthMax - viewportWidthMin)
- Y: fontSizeMax - viewportWidthMax * X
- Z: X * 100
- fontSizeMax: フォントサイズの最大値
clamp()の中央値（0.5rem + 1.6vw）で、calc()は必要ないの？ と思うかもしれませんが、clamp()はすでに数学関数であるため必要ありません。また、min(), max()でも同様に必要ありません。
フォントのサイズをレスポンシブ対応にするclamp()で定義したCSSは、カスタムプロパティにしても機能します。下記のデモをご覧ください。
See the Pen
Basic fluid typography by Michelle Barker (@michellebarker)
on CodePen.
sponsors
