最初に覚えるCSS関数

最近のモダンCSSの代表格がCSS関数です。CSS関数を使うことで、Webサイトを効率的に管理することや今までできなかった複雑なデザインまでできるようになっています。

今回は、CSS関数の中でも比較的よく使う関数を紹介します。

var()関数

var(カスタムプロパティ)
覚える優先度：★★★★★
変数をつかうメリットが高いので、積極的に使いたい。

var()関数を使うと定義した変数（カスタムプロパティ）を必要な時に使うことができます。

/* 変数（カスタムプロパティ）を定義する */
:root {
    --color-primary: #f00;
}

/* 定義した変数（カスタムプロパティ）を使用する */
h1 {
    color: var(--color-primary); /* --color-primaryは#f00 */
}

事前に変数（カスタムプロパティ）を定義する必要があります。
:rootに変数（カスタムプロパティ）を定義することで、グローバル変数としての扱いとなり、すべての値に定義した変数（カスタムプロパティ）を使用することができます。

また、:root以外に変数（カスタムプロパティ）を定義することでスコープ（影響の範囲）を限定することもできます。

/* 変数（カスタムプロパティ）を特定のセレクタに定義する */
.section {
    --color-secondary: #0f0; /* スコープは.section内 */
}

/* 上記の変数（カスタムプロパティ）は.section内では使える */
.section {
    background-color: var(--color-secondary); /* --color-secondaryは#0f0 */
}

/* .sectionの外の場所ではスコープ外なので使えないNG!! */
body {
    background-color: var(--color-secondary); /* NG */
}

min()関数

min(値1, 値2)
覚える優先度：★★☆☆☆
max-widthとwidthを使えば同じことができるため、優先順位はそこまで高くない。

min()関数を使うと指定した値の中で最小の値が適用されます。

使用例を元に解説します。

例えば、普段は幅が90%でいいけど、1200px以上の幅にしたくない時などのシーンでmin()関数を使います。min()関数の()の中に入る値は、相対値と絶対値になることが多いです。値ごとに『,（カンマ）』で区切ります。

/* 普段は幅が90%だけど、1200pxは超えたくない */
width: min(90%, 1200px);

ポイントは『最小値』が適用されるというところです。

/* これでも同じ */
max-width: 1200px;
width: 90%;

min()関数を覚えていなくても、max-widthとwidthを両方使うと同じ結果になります。

calc()関数

calc(計算式)
覚える優先度：★★★★☆
他に代替できるものがないため、優先順位高い。

calc()関数は、CSS上の値を計算をしたい時に使う関数です。

例えば、親要素の幅の1/3のサイズにしたい時、厳密にpxなどの絶対値を指定することができないことがあります。親要素の幅は、ブラウザのサイズやデバイスのサイズで異なり決まった数値ではなく相対値になることもあるので、何pxになるかはわからないことが多いです。そういった時に活躍するのがcalc()関数です。

/* calc()で使う演算子 */
+ 足す
- 引く
* 掛ける
/ 割る

/* 親要素の幅の1/3 */
width: calc(100% / 3);

/* これはcalc()を使わず計算しているのでダメ */
width: 100% / 3;

「+」と「-」については、計算として使う場合は前後に半角スペース（ホワイトスペース）を入れる必要があります。（「*」や「/」は半角スペースを必要ではないですが、ルールが煩雑になるため半角スペースを使うことを推奨します）

/* 親要素の幅から30px引いたもの */
width: calc(100% - 30px);

/* これはルール違反のためダメ */
width: calc(100%-30px);

計算の引くではなく、マイナスという数値として使う場合は、半角スペース（ホワイトスペース）は不要です。

/* -1（マイナス１）で掛ける */
top: calc(50px * -1);

/* これは、50px掛ける引く1と意味がわからなくなってるのでNG */
top: calc(50px * - 1); /* NG */

/* ちなみに今回の場合はわざわざcalc()使わなくてもいい */
top: -50px;

変数（カスタムプロパティ）と組み合わせることも可能です。

/* 変数とcalc()を使う */
:root {
    --v-space: 32px;
}

div {
    top: calc(var(--v-space) * -1);
}

clamp()関数

clamp(最小値, 推奨値, 最大値)
覚える優先度：★★★☆☆
まだまだ使うシーンは多くはないが、これが使えるとメディアクエリを使う機会がかなり減る。

clamp()関数は、幅に応じてシームレスなサイズ変化ができる関数です。

例えば、文字サイズを指定する際に、vwという相対値を使った場合、画面幅に応じてシームレスに文字のサイズが変わります。画面の幅を基準にしている単位なのでレイアウトが崩れにくいメリットもある反面、画面の幅によっては、大きすぎたり小さすぎたりしてしまうデメリットがあります。

大きすぎるのはまだいいとしても、小さすぎるのは問題です。ユーザビリティの観点からも10px以上（理想は12px以上）ないと小さすぎて読めないリスクがあります。またブラウザによっては、10px以下の場合バグが生じることもありました。

大きすぎる場合も、圧迫感があり読みにくさが伴ってきます。ともあれ、サイズに合わせた適正な最小サイズや最大サイズがある方がユーザーにとって優しいデザインになります。そんな時につかうのがclamp()関数です。

/* 通常の文字サイズは5vw、ただし最小サイズは12px、最大サイズは24px */
font-size: clamp(12px, 5vw, 24px);

repeat()関数

repeat(繰り返す数, 値)
覚える優先度：★★★☆☆
代替できるが、覚えておくと楽になる。

repeat()関数は繰り返す数と値を記述できる関数です。使うと運用保守が楽になります。

/* 100pxのグリッドアイテムを3列にする */
grid-template-columns: repeat(3, 100px);

ただし、repeat()を使わなくても同じ指示ができます。

/* repeat()を使わなくても100pxを3回記述してもよい */
grid-template-columns: 100px 100px 100px;

repeat()関数を使わない場合、値を100pxから200pxに変えるのに、3箇所打ち替えが必要で手間がかかります。repeat()関数の場合は、1箇所だけです。
また9列にするなど値の記述が多い場合なども、100pxを9箇所打ち込む手間がかかります。