Zenn
😎

【CSS変数と関数】var, calc(), min(), max(), clamp()

2020/12/15に公開
CSS
Scss
tech

メインビジュアル
こんにちは。
IE 11のサポート終了により今までIEに遠慮して使ってなかったCSSが問題なく使えるようになってきましたね。個人的にすごい嬉しいです。

CSSの進化はものすごく速くて、最近では変数や関数がCSSでも使用できるようになりましたね。
今回はその中から 「var, calc(), min(), max(), clamp()」 の5つを紹介したいと思います。

var(CSSカスタムプロパティ)

CSS変数やカスケード変数とか言われたりもします。
PHPやJavaScriptのように変数をCSSだけで定義することができます。

/* 変数宣言 */
/* :rootに定義することでどこでも使える（グローバル変数） */
:root {
　--wrapperWidth: 1024px;
}

/* 使用時 */
.wrapper {
　max-width: var(--wrapperWidth);
}

個人的にCSS変数はレスポンシブデザインととても相性がいいなと感じていて下記のような使い方をしてます。

下記は「正方形のボックスを作り、中のテキストを天地中央に配置する」一例です。

/* メディアクエリと変数の組み合わせ */
:root {
　--boxSize: 44px;
}
@media (min-width: 768px){
　:root {
　　--boxSize: 64px;
　}
}
@media (min-width: 1024px){
　　:root {
　　　--boxSize: 84px;
　　}
}

/* 変数を使用 */
.box {
　width: var(--boxSize);
　height: var(--boxSize);
　line-height: var(--boxSize);
　text-align:center;
}

メディアクエリを使ってウィンドウサイズによって変数の値を変えてるのがポイントです。
サイズをを変更したい時も変数の値だけ変えればいいだけなので修正範囲が少なくて済みます。

calc関数

calc関数はかなり前から使用できるので、既に知ってる人も多いと思います。
divの横幅などを 100% / 3など計算して指定することができます。

index.html
<div class="calc">
　<div>BOX A</div>
　<div>BOX B</div>
　<div>BOX C</div>
</div>
style.css
.calc {
　width: 900px;
}
.calc > div {
　width: calc(100% / 3); /* 900px / 3 = 300px */
}

calc関数とvarの組み合わせ

個人的にflexboxでボックスを横並びにする時によく使うcalcとvarの組み合わせです。
マージンを変数化してそれを軸にしてCSSを組む感じです。

index.html
<div class="calc">
　<div>BOX A</div>
　<div>BOX B</div>
　<div>BOX C</div>
</div>
style.css
.calc {
　--margin: 50px;
　width: 1000px;
}
.calc > div {
　/*
　　--marginが、50px時の計算式： (1000px - 100px) / 3
　　--marginが、100px時の計算式： (1000px - 200px) / 3
　　計算式を定義しておけば変数の値を変えるだけでよい。
 */
　width: calc((100% - (var(--margin)) * 2) / 3);
}
.calc > div + div {
　margin-left: var(--margin);
}

/* メディアクエリで変数の値を変更する */
@media (min-width: 1024px){
　.calc {
　　--margin: 100px;
　}
}

こうやるとかなりプログラミングっぽくなりますね。

min関数

今まで最大幅を定義する時に使用していたwidth: 100%とmax-width: 500pxなどの組み合わせを
一行で簡単に書くことができます。

index.html
<div class="min">
　<p>width: min(100%, 500px)</p>
　<p>「100%」が「500px」より小さい場合は「100%」が適用。</p>
　<p>「100%」が「500px」より大きい場合は「500px」が適用。</p>
</div>
style.css
/* 今までの書き方 */
.min {
　width: 100%;
　max-width: 500px;
}

/* 新しい書き方 */
.min {
　width: min(100%, 500px);
}

max関数

今まで最小幅を定義する時に使用していたwidth: 65%とmin-width: 200pxなどの組み合わせを
一行で簡単に書くことができます。

index.html
<div class="max">
　<p>width: max(65%, 200px)</p>
　<p>「65%」が「200px」より大きい場合は「65%」が適用。</p>
　<p>「「65%」が「200px」より小さい場合は「200px」が適用。</p>
</div>
style.css
/* 今までの書き方 */
.min {
　width: 70%;
　min-width: 320px;
}

/* 新しい書き方 */
.min {
　width: max(70%, 320px);
}

clamp関数

clampはちょっとややこしいですが、最小値、推奨値、最大値の3つを設定できる関数です。
今回はわかりやすくfont-sizeで利用してみます。

index.html
<div class="clamp">
  <p class="clamp-text">font-size: clamp(12px, 7vw, 32px)</p>
  <p>上記の例だと、推奨サイズ：7vw、最小サイズ：12px、最大サイズ：32pxになる。</p>
</div>
style.css
.clamp-text {
　font-size: clamp(12px, 7vw, 32px);
}

今までレスポンシブデザイン時にメディアクエリで細かく切り替えてたりてたのですがclampうまく使えばそれも不要になりそうです。

IEが死んでよかった

どうでしょう？
IEに対応する必要がなくなったことによってかなり開発が楽になったと思いませんか？
上記のvarとcalcの組み合わせを初めて使用した時に、IEを考慮しなければここまでCSSはクールにかけるのか。 と感動しました。

IEがちゃんと成仏して二度とこの世に戻ってこないことを祈っています（南無...）。

Discussion