【CSS】vw+ remとclamp関数を使ってfont-sizeを可変する方法

2023年1月27日2023年7月1日

URLをコピーしました！

vw+rem単位とclamp関数を使ってfont-sizeをレスポンシブに可変する方法を学びました。

コード

<h1 class="fluid-typo">font-size: clamp(1rem, 2vw + .5rem, 1.625rem);</h1>

.fluid-typo {
   font-size: clamp(1rem, 2vw + .5rem, 1.625rem);
}

デモ↓

解説（ブラウザのfont-sizeが16pxの場合）

font-sizeの最小値が16pxで、最大値が26pxになります。

2vw + .5remがややこしいです。

画面幅が500pxの場合↓
500 * 0.02 + 16 * .5で.fluid-typoのfont-sizeが18pxになります。

画面幅が1000pxの場合↓
1000 * 0.02 + 16 * .5で28pxになり最大値が26pxのため、
.fluid-typoのfont-sizeは26pxになります。

実機検証(Chromeで)

font-sizeにvwを使うと、ブラウザのfont-sizeを変更してもfont-sizeは変わりません。

また、Chormeではfont-sizeのみをズームすることはできません。
参考→テキスト、画像、動画のサイズを変更する（拡大、縮小）

vw と remを使用すると、どうなるのか見ていきます。

画面幅可変

画面幅によって、.fluid-typoのfont-sizeが可変されています↓

ブラウザのズーム

画面幅1000pxで拡大率200%の場合↓
1000 / 2 = 画面幅500pxの時のfont-sizeと一緒になります。
よって.fluid-typoのfont-sizeは18px（見た目は36px）になります。

全体の要素が拡大されているため、font-sizeのみのズームはできていません↓

詳しくはこちら↓

Smashing Magazine

Modern Fluid Typography Using CSS Clamp — Smashing Magazine We’ll explore fluid typography principles, use-cases, implementation with CSS clamp() and an interactive fluid typography calculator.

ブラウザのfont-sizeを可変

ブラウザのfont-size可変で、.fluid-typoのfont-sizeが可変されています↓

使用例

375pxのデザインカンプのfont-sizeが16px
768pxのデザインカンプのfont-sizeが24px

上記の場合で、375px〜768px間のfonts-sizeを可変したい時などに便利だと思いました。

計算してくれるツールも存在してます→Font-size Clamp Generator

sassの関数とmixinを使用してもできます↓

@charset 'UTF-8';
@use "sass:math";

// px -> remに変換
@function pxToRem($size, $base-font-size: 16px) {
  @return math.div($size, $base-font-size) * 1rem;
}

//*=======================================================
//* clamp関数
//*=======================================================

// ====================================================================
// example -> メインビジュアルのfont-sizeをなめらかに変更
// .p-hero__title {
//  @include ff(最小font-size, 最大font-size,最小幅,最大幅);
// }
//====================================================================


// デザインカンプのアートボードサイズ
$sp-comp-width: 375px;
$pc-comp-width: 1400px;

@function flexClamp($minY, $maxY, $minX: $sp-comp-width, $maxX: $pc-comp-width) {
  //縦軸の最小値をrem換算
  $minValY: pxToRem($minY);
  //縦軸の最大値をrem換算
  $maxValY: pxToRem($maxY);
  // ===========================================================
  // clampの中央値は一次関数 y = ax + bで求める
  // a -> 傾き(変化の割合) = (垂直の増加量) / (水平方向の増加量);
  // b -> 切片(y軸との交点) = 最小のサイズ - 傾き * 最小の横幅;
  // y = a * 100vw + b
  // 参考：https://sushirice.pro/css-store/297/
  // 正直まだよく分かってない
  // ===========================================================
  //垂直方向の増加量
  $verticalAmount: $maxY - $minY;
  //水平方向の増加量
  $horizontalAmount: $maxX - $minX;
  //傾き(小数点以下を3桁まで)、math.round()は小数点以下を四捨五入する関数
  $tilt: math.div(math.round(math.div($verticalAmount, $horizontalAmount) * 1000), 1000);
  //切片
  $intercept: pxToRem($minY - $tilt * $minX);
  //結果
  @return clamp(#{$minValY}, #{$tilt * 100vw} + #{$intercept}, #{$maxValY});
}


@mixin ff($minFontSize, $maxFontSize, $minWidth: $sp-comp-width, $maxWidth: $pc-comp-width) {
  font-size: flexClamp($minFontSize, $maxFontSize, $minWidth, $maxWidth);
}

事前に単位を除去するSassの関数を作ったり、ブレイクポイントの変数と絡めればもっと良さそうです。