CSSの数字に関する関数について

投稿日時 : 2024/11/18 更新日時 : -

CSSには便利な関数がある。例えばボックスを表示する際に親要素の横幅の半分のサイズのボックスを作りたい場合、widthを50%にすれば良いが、親要素より100pxだけ横幅が小さいボックスを作成したい場合どうやるのだろう。

ここで使えるのが足し算や引き算ができる関数を使う。
100% - 100pxの結果が分かれば上記問題は解決できそうだ。この記事ではよく使うCSSの数字に関する関数について解説する。

CSSの関数 - calc()

単純に計算を使いたい場合はcalc関数を使うと良い。上記の問題を解決する場合は以下のようにする。


width: calc(100% - 100px);

足し算、引き算、掛け算、割り算の他に良く使うのが、別の単位同士を使った計算をさせる事も可能だ。


margin-left: calc(1em + 6px);

上記は左のマージンの指定で1文字と6pxの分だけ余白を作っている。このように自分では把握しづらい単位を使った計算ならばcalc()関数を使うと簡単に計算する事が可能だ。慣れれば色々お応用が利きそうだな。

レスポンシブデザインなどに使えるかもしれない関数がmin()やmax()だ。


min(value1, value2, value3, ...);

上記のvalueの中で一番小さいものが適用される。


max(value1, value2, value3, ...);

察しの通り、max()はvalueの中で一番大きいものが適用される。

一見どんな時に使うんじゃい！　とツッコみが入りそうだがCSSはpxなど固定された数字を使う事より%やvwを使う場合も多い。この時に%やvwはブラウザのサイズによって可変する。この可変するサイズに細かく対応する際にこの関数を使うとよさげだ。例えば


width: min(50vw, 360px);

こうした場合、例えばブラウザの横のサイズが768pxだったら50vwは384pxとなり360pxと比べたら360pxの方が小さいので360pxがwidthとなる。

ブラウザのサイズが640pxだと50vwは320pxだからこれが適用されるな。レスポンシブデザインに使えそうではあるが、僕はそんなにこの関数は使ったことがない。

ただ、考え方によってはこんな使い方もできそうだ。


.my-font-size1 {
 font-size: max(1.1em, 1.2vw);
}

maxの関数を使ったフォントサイズ、ブラウザの幅を変えてみてね！

この場合、ブラウザの横幅が大きくなるに従って文字サイズが大きくなるが、ブラウザを小さくしても最低1.1emのフォントサイズとなる。しかし、これをやるより下記のmin()とmax()を合わせたclamp()を使うと良いぞ！

clamp()関数は少し難しいかもしれないが慣れの問題だ。例えば下記のコードがあったとする。


.my-font-size2 {
 font-size: 1vw;
}
.my-font-size3 {
 font-size: 3vw;
}

my-font-size2のフォントサイズ

my-font-size3のフォントサイズ

PCならブラウザの横のサイズを変えて大きくしたり小さくしたりしてほしい。この時にフォントサイズが小さい方のmy-font-size2はブラウザを小さくすると文字が見えないくらい小さくなるし、逆に大きいmy-font-size3はブラウザを大きくすると文字サイズがあまりにも大きくなってしまう。

フォントサイズを小さいブラウザなら小さくなり過ぎないように歯止めをかけて、大きいブラウザは文字サイズが大きくなり過ぎないように歯止めをかけたい。これを解決できるのがclamp()関数だ。


clamp(最小値, 標準値, 最大値);

上記のように指定する。


.my-font-size4 {
 font-size: clamp(1em, 1.5vw, 1.6em);
}

clamp()を使用したフォントサイズ

ブラウザのサイズを変えるとフォントサイズが最小でも1emで最大でも1.6emとなりそれ以外は1.5vwになる。大変便利な関数なので是非使えるようになろう！

CSSには他にも多くの関数がある。例えば色に関するもの、表示位置に関するもの、要素をぼかしたりグレースケールにしたりできるフィルターなど、ここでは紹介しないがそれらを探してみるのもよいだろう。