Zenn
🦜

clamp()関数で作る最小値、最大値設定が可能な可変font-sizeスタイル

2023/10/06に公開
CSS
Tailwind CSS
tech

CSSのclamp()関数を利用しフォントサイズを最小値、最大値の間でスクリーンサイズに合わせ可変させるテクニッがあります。

https://coliss.com/articles/build-websites/operation/css/css-clamp-calculator.html
https://min-max-calculator.9elements.com/
上記のようなジェネレータを利用すれば簡単に作成ができますが、
サイト内の複数個所で利用したい場合かなり手間。
そこで簡単に使えるようにするために汎用クラス化してみます。

実装サンプル

基本スタイル

:root {
  /* 最小ビューポート */
  --font-variable-minViewportPx-default: 320;
  /* 最大ビューポート */
  --font-variable-maxViewportPx-default: 1200;
  /* 1remのpx数 */
  --font-variable-remBase: 16;
}

.font-clamp {
  /* 最小ビューポート */
  --font-variable-minViewportPx: var(--font-variable-minViewportPx-default);
  /* 最大ビューポート */
  --font-variable-maxViewportPx: var(--font-variable-maxViewportPx-default);
  /* 最小文字サイズ */
  --font-variable-minPx: 16;
  /* 最大文字サイズ */
  --font-variable-maxPx: 30;
  /* 必要な計算 */
  --font-variable-variablePart: calc(
    (var(--font-variable-maxPx) - var(--font-variable-minPx)) / (var(--font-variable-maxViewportPx) - var(--font-variable-minViewportPx))
  );
  --font-variable-constant: calc((var(--font-variable-maxPx) - var(--font-variable-maxViewportPx) * var(--font-variable-variablePart)) / var(--font-variable-remBase));
  font-size: clamp(
    calc(var(--font-variable-minPx) * (1rem / var(--font-variable-remBase))),
    calc((var(--font-variable-constant) * 1rem)) + ((100 * var(--font-variable-variablePart)) * 1vw),
    calc(var(--font-variable-maxPx) * (1rem / var(--font-variable-remBase)))
  );
}

※--font-variable-remBaseは1remのpx数に合わせて設定が必要です。
1rem = 10pxなら--font-variable-remBase: 10;
1rem = 16pxなら--font-variable-remBase: 16;

Modifierクラスで拡張

上記のようなクラス単体では応用が利かないため、汎用的に利用できるように拡張します。
以下は最小フォントサイズを10px、最大フォントサイズを100pxに設定できるModifierです。

.font-clamp._min-10 {
  /* 最小文字サイズ */
  --font-variable-minPx: 10;
}
.font-clamp._max-100 {
  /* 最大文字サイズ */
  --font-variable-maxPx: 100;
}

.font-clampに設定されているCSS変数（--font-variable-minPx、--font-variable-maxPx）を上書きすることでベースのスタイルはそのまま文字サイズを変更することができるようになります。
プロパティ名や設定値を見るとpxで設定しているように見えますが
実際はremで指定しているためアクセシビリティ的にも問題ありません。

htmlでは以下のように記述。

<p class="font-clamp _min-10">最小10px～最大30px</p>
<p class="font-clamp _max-100">最小16px～最大100px</p>
<p class="font-clamp _min-10 _max-100">最小10px～最大100px</p>

SP,PCなどメディアクエリでの切り替えサンプル

以下のようなスタイルを作成すると
SP時は20-100px、PC時は10-40pxなど
メディアクエリごとにCSS変数のみで可変値を変えることも可能です。

.font-clamp._custom {
  --font-variable-minPx: 20;
  --font-variable-maxPx: 100;
  --font-variable-maxViewportPx: 640;
}

@media (min-width: 641px) {
  .font-clamp._custom {
    --font-variable-minViewportPx: 640;
    --font-variable-maxViewportPx: 1200;
    --font-variable-minPx: 10;
    --font-variable-maxPx: 40;
  }
}

tailwindcssでさらに簡単に

tailwidcssのJITモードが利用できる環境であればcssの記述量が減らせます。

このサンプルは画面幅の変更は行っていませんが、フォントサイズと同じようにカスタムプロパティ--font-variable-minViewportPx --font-variable-maxViewportPxを設定することで任意の幅でフォントサイズを可変させることが可能です。

よかったら使ってみてください。

Discussion