CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。

たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。

このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。

Min-Max Calculator
Min-Max Calculator -GitHub

• Min-Max Calculatorの特徴
• Min-Max Calculatorの使い方

Min-Max Calculatorの特徴

Min-Max Calculatorは、レスポンシブ対応にする時に最小値と最大値を定義してその間を流動した値にするclamp()の記述を簡単に生成できるツールです。

メディアクエリを使用しないこの流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新のテクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイズに応じた最適な値をレンダリングさせることができます。

Min-Max Calculator

メディアクエリを使用しない他のやり方としては、vw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の値はclamp()が流動的に処理してくれます。変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。

• CSSの数学関数min()、max()、clamp()の基本的な使い方
• CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説

Min-Max Calculatorの使い方

使い方は、簡単です。
最初に使用する単位（px or rem）を決め、最小値と最大値を決めます。あとは、ビューポートの最小値と最大値を決めると、CSSが生成されます。

Min-Max Calculator

生成されたCSSは、下記のようになります。

clamp()関数は、2つの定義された値（最小値と最大値）の間をクランプします。3つのパラメーター（最小値、推奨値、最大値）を使用します。
上記は、最小値が1rem、推奨値が0.818rem + 0.91vw、最大値が1.5remになり、推奨値はビューポートのサイズに応じて流動的になります。

Min-Max Calculatorをローカルで使用する方法

Min-Max Calculatorをオンラインではなく、ローカル環境でも使用できます。
まず、依存関係をインストールします。

サーバーを起動します。

詳しくは、Min-Max Calculator -GitHubをご覧ください。

CSSのclamp()関数でどのようにレスポンシブ対応になるかは、デモページで確認してください。
まずは、font-sizeのデモ。

See the Pen
min-max-interpolation example font-size by Nils Binder (@enbee81)
on CodePen.

最小値1.5remから始まり、最大値3.5remまで増加します。

続いて、font-sizeと絶対位置のデモ。

See the Pen
min-max-interpolation example absolute positioning by Nils Binder (@enbee81)
on CodePen.

オレンジ色のボールは、小さいスクリーンではボックスの外側に負の値で配置され、 スクリーンが大きくなると値は正になります。