フォントサイズ以外もclamp()で動的にレスポンシブ対応したい

前回の記事でclamp()関数を使って、メディアクエリを書かずにレスポンシブにフォントサイズを変更できることを紹介しました。

【脱メディアクエリ】レスポンシブデザインに必須なclamp()関数

clamp()関数とは？ clamp()関数はcssの関数で、値を上限と下限に設定しその間を動的に変化させることができます。 ざっくり言うと、clamp()関数を使えばメディアクエ…

このclamp()関数をフォントサイズだけでなく、余白にも採用したらメディアクエリの記述が大幅に減って、よりスマートにコーディングができるよね？

ただ、そうなると多くのプロパティにこのclmap()関数を記述しないといけないんだよね。。
メディアクエリはかかないけど、ちょっと記述が面倒だなぁと。

実際、以下のようになりますね。

// 関数なしで通常の記述の場合
.box {
  height:clamp(50px,8vw,80px);
  margin-top:clamp(24px,4vw,40px);
  padding:clamp(8px, 1.6vw,16px);
  border-radius:clamp(8px,1.6vw,16px);
}

上記のコードはboxのheight, margin-top, padding, border-radiusの値をclamp()関数で記述したものです。かなり記述が面倒です。

そんな問題を解決するためにsassの@functionを使ってclamp()関数を簡略化してシンプルに書き換えてみたいと思います！

@functionでclamp()関数を簡略化してみる

まずは実際にコードをみてみましょう。

// clamp関数をカスタム。ここではlen()でclampを呼び出す関数を作成
@function len($min,$max) {
  @return #{clamp }($min * 1px, $max * 0.1vw, $max * 1px);
}

// len()を使用する。引数には最小値と最大値の数値を入力。px単位は不要
.box {
  height:len(50,80);
  margin-top:len(24,40);
  padding:len(8,16);
  border-radius:len(8,16);
}

コードの説明をしていきましょう。

@function len($min,$max) {

@functionで関数を宣言。任意で作成したlen()の引数には$min（最小値）、$max（最大値）の値を設定しておきます。呼び出す際には、len(最小値の数値、最大値の数値)を入力します。推奨値の値は最大値の値を計算して算出します。

@return #{clamp }($min * 1px, $max * 0.1vw, $max * 1px);

最小値：$min * 1px
最大値：$max * 1px

そして間の推奨値は最大値に0.1vwをかけた数値（$max * 0.1vw）にしています。前回の記事でも書いたようにこうすることでブラウザ幅が1000px以下になると徐々に推奨値の値が最小値へ向かって変化していきます。

実装したソースコードは以下になります。

heightを80pxから50pxに変化させているは、実際のコーディングではこのような書き方はしないですが、サイズの変化も示す例として入れています。

font-sizeをremで記述する場合

ブラウザ間のpxのサイズ感のズレをなくすために、font-sizeはremで指定するのが主流と言われています。
では、上記で作成した関数をremで記述することはできるでしょうか。実際に見ていきましょう

@function rem($min,$max) {
  @return ${clamp}($min / 16 * 1rem, $max * 0.1vw, $max / 16 * 1rem);
}

p {
  font-size: rem(14,18);
}

このような形になります。
最小値、最大値それぞれに入力した値を16で除算して1remをかけます。
例えば最小値の値が14だった場合、

14 ÷ 16 = 0.875

これに1remをかけることで0.875remとなります。
同様に最大値が18とした場合も

18 ÷ 16 = 1.125

となり、1remをかけて1.125remと計算することができます。

16という数値で割る理由は、1rem = 16pxだからです。
最小値や最大値で入力したそれぞれの値が1remに対して何倍の値なのかを計算しています。

まとめ

いかがでしょうか。
@functionを利用してclamp()関数をよりシンプルに記述し余白やサイズなどもレスポンシブに対応。font-sizeについてもrem換算で記述できます。

これで一気にメディアクエリを書く回数が大幅に減るでしょう。