これは便利なVS Codeの機能拡張！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできる -Clamp It!

CSSの実装に便利なVS Code用の機能拡張がリリースされました！

レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。

Clamp It! -GitHub
Clamp It! -Visual Studio Marketplace

• レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義
• Clamp It!の使い方
• Clamp It!のインストール

レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義

レスポンシブ用のフォントサイズを設定するには、CSSのclamp()関数が便利です。たとえば、ルート要素が16pxで、スクリーンのサイズごとにフォントサイズを変えるとします。

• 480pxのスクリーン: 1.rem 16.8px
• 800pxのスクリーン: 1.25rem 20px
• 1000pxのスクリーン: 1.375rem 22px
• 1280pxのスクリーン: 1.5rem 24px

これは、clamp()関数を使えば、たった一行で設定できます。

ただ、clamp(1rem, calc(0.75rem + 1vw), 1.5rem);の設定を記述するのは、かなり面倒です。最近ではいろいろなオンラインツールがあり簡単にできますが、「Clamp It!」はVS Codeでそれが簡単にできるようになります。

Clamp It!の使い方

Clamp It!はVS Codeの機能拡張で、ベースのフォントサイズ、スマホ用のフォントサイズ、デスクトップ用のフォンサイズ、そしてビューポートサイズを指定すると、clamp()関数をrem単位で自動的に計算することができます。

まずは、以下のようにCSSを記述します。

• 1番目: スマホ用のフォントサイズ
• 2番目: デスクトップ用のフォンサイズ
• 3番目: ベースのフォントサイズ
• 4番目: 最小ビューポートサイズ
• 5番目: 最大ビューポートサイズ

16px, 24px, 16px, 480px, 1280px;を選択状態にし、コマンドパレット（Ctrl+Shift+P）を開き「Clamp It!」を入力してコマンドを実行すると、下記のCSSがすぐに生成されます。

Clamp It!では、デフォルトでビューポートサイズが設定されており、スマホ用とデスクトップ用のフォントサイズを記述するだけでもclamp()関数を使ったCSSを生成できます。
下記のCSSが、Clamp It!を実行すると、

こうなります。

デフォルトでは、最小が600pxに、最大が1200pxに、ベースは16pxになっていますが、これは.vscode/settings.jsonで設定を変更できます。

Clamp It!のインストール

Clamp It!はVS Codeの機能拡張なので、Visual Studio Marketplaceからインストールできます。もちろん、VS Code上からもインストールできます。

Clamp It! -Visual Studio Marketplace

VS Code上からインストールする場合は、機能拡張（Ctrl+Shift+X）を開き、「Clamp It!」を検索し、インストールします。