これは便利なVS Codeの機能拡張！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできる -Clamp It!
Post on:2024年10月24日
sponsors
CSSの実装に便利なVS Code用の機能拡張がリリースされました！
レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。
Clamp It! -GitHub
Clamp It! -Visual Studio Marketplace
レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義
レスポンシブ用のフォントサイズを設定するには、CSSのclamp()関数が便利です。たとえば、ルート要素が16pxで、スクリーンのサイズごとにフォントサイズを変えるとします。
- 480pxのスクリーン: 1.rem 16.8px
- 800pxのスクリーン: 1.25rem 20px
- 1000pxのスクリーン: 1.375rem 22px
- 1280pxのスクリーン: 1.5rem 24px
これは、clamp()関数を使えば、たった一行で設定できます。
|
1 2 3 |
body{ font-size: clamp(1rem, calc(0.7rem + 1vw), 1.5rem); } |
ただ、clamp(1rem, calc(0.75rem + 1vw), 1.5rem);の設定を記述するのは、かなり面倒です。最近ではいろいろなオンラインツールがあり簡単にできますが、「Clamp It!」はVS Codeでそれが簡単にできるようになります。
Clamp It!の使い方
Clamp It!はVS Codeの機能拡張で、ベースのフォントサイズ、スマホ用のフォントサイズ、デスクトップ用のフォンサイズ、そしてビューポートサイズを指定すると、clamp()関数をrem単位で自動的に計算することができます。
まずは、以下のようにCSSを記述します。
|
1 2 3 |
body{ font-size: 16px, 24px, 16px, 480px, 1280px; } |
- 1番目: スマホ用のフォントサイズ
- 2番目: デスクトップ用のフォンサイズ
- 3番目: ベースのフォントサイズ
- 4番目: 最小ビューポートサイズ
- 5番目: 最大ビューポートサイズ
16px, 24px, 16px, 480px, 1280px;を選択状態にし、コマンドパレット（Ctrl+Shift+P）を開き「Clamp It!」を入力してコマンドを実行すると、下記のCSSがすぐに生成されます。
|
1 2 3 |
body{ font-size: clamp(1rem, calc(0.7rem + 1vw), 1.5rem) } |
Clamp It!では、デフォルトでビューポートサイズが設定されており、スマホ用とデスクトップ用のフォントサイズを記述するだけでもclamp()関数を使ったCSSを生成できます。
下記のCSSが、Clamp It!を実行すると、
|
1 2 3 |
body{ font-size: 16px, 24px; } |
こうなります。
|
1 2 3 |
body{ font-size: clamp(1rem, calc(0.5rem + 1.333vw), 1.5rem) } |
デフォルトでは、最小が600pxに、最大が1200pxに、ベースは16pxになっていますが、これは.vscode/settings.jsonで設定を変更できます。
|
1 2 3 4 5 |
{ "clampExtension.globalMinViewport": 600, "clampExtension.globalMaxViewport": 1200, "clampExtension.baseFontSize": 16 } |
Clamp It!のインストール
Clamp It!はVS Codeの機能拡張なので、Visual Studio Marketplaceからインストールできます。もちろん、VS Code上からもインストールできます。
Clamp It! -Visual Studio Marketplace
VS Code上からインストールする場合は、機能拡張（Ctrl+Shift+X）を開き、「Clamp It!」を検索し、インストールします。
sponsors
