これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
Post on:2024年6月13日
sponsors
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。
CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。
Type Fluidityの特徴
流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイズに応じた最適な値をレンダリングさせることができます。
|
1 2 3 |
p{ font-size: clamp(1rem, calc(0.75rem + 1vw), 1.5rem); } |
このたった1行のCSSで、下記のように表示されます。
※ルート要素が、16pxの場合
- 360pxのスクリーン: 1rem 16px
- 480pxのスクリーン: 1.05rem 16.8px
- 800pxのスクリーン: 1.25rem 20px
- 1000pxのスクリーン: 1.375rem 22px
- 1280pxのスクリーン: 1.5rem 24px
clamp()の値は、下記の通りです。
|
1 |
clamp(fontSizeMin, calc(Yrem + Zvw), fontSizeMax) |
- fontSizeMin: フォントサイズの最小値
- X: (fontSizeMax - fontSizeMin) / (viewportWidthMax - viewportWidthMin)
- Y: fontSizeMax - viewportWidthMax * X
- Z: X * 100
- fontSizeMax: フォントサイズの最大値
Type Fluidityは、このCSSをカスタマイズして簡単に生成できます。
CSSのclamp()関数について詳しくは、下記をご覧ください。
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
Type Fluidityの使い方
Type Fluidityの使い方は、簡単です。
まずは、下記ページにアクセスします。
使用する単位を決め、フォントサイズの最小値と最大値を設定し、ビューポートサイズの最小値と最大値を設定します。
remとpxのどちらかを選択
単位をremにし、フォントサイズに1と1.5を設定し、ビューポートサイズに25と75を設定すると、下記のCSSが生成されます。
|
1 |
clamp(1rem, calc(0.75rem + 1vw), 1.5rem) |
このCSSでフォントサイズがどのように変化するのかは、その下にプレビューが表示されます。
左: 固定サイズ、右: 流体サイズ
右上でline-heightの値を設定できます。
line-heightの値を設定
中央のバーをスライドさせると、サイズを変更できます。
中央のバーを右にスライド
width: 400px;のときは、フォントサイズは16px相当になります。
流体サイズ
今度は逆に広くしてみます。
中央のバーを左にスライド
width: 1000px;のときは、フォントサイズは22px相当になります。
流体サイズ
sponsors
