今回はCSSの比較関数である、min()、max()、clamp()について紹介します。
これらを使いこなすことでメディアクエリを使わずともレスポンシブ対応ができてとても便利です。
私自身も比較関数を使うようになってからスタイリングの時間の節約ができたり、レスポンシブの手間が省けたりと良いことづくめで重宝しています。
今回はそんな比較関数について紹介します。
（今回のゴール）CSSの比較関数を使いこなせるようになる！
そもそも比較関数によって何ができる？
比較関数を使うことで次のようなことができます。
- 画面幅に合わせて最適なフォントサイズやコンテナサイズを指定できる
- 設定にメディアクエリを必要としない
比較関数の優れている点はメディアクエリを必要としないため、CSSの記述が減る&コードがすっきりするという利点があります。
メディアクエリとは、「@media screen and~~」で記述する、スマートフォン、タブレット用のレイアウトを組む際に使用されるコードのことです。
比較関数は次の3つがあります。
- min()
- max()
- clamp()
それではそれぞれについて解説していきます。
比較関数①・・・min()
まず初めにmin()関数についてです。
下の例を使って解説します。
See the Pen Untitled by kota (@kota1459) on CodePen.
このコードはdiv要素に横幅と高さを200pxを指定して背景色を水色にしたものです。
こちらにmin()関数を使っていきたいと思います。
記述の仕方はカッコの中に値を二つ入れるだけです。
See the Pen Untitled by kota (@kota1459) on CodePen.
上2つのコードを見比べて違いが分かりますでしょうか？
横幅に違いがでていると思います。
min()関数はカッコ内の2つの値のうち、小さい値をwidthの値としてとるというものです。
そのため、ブラウザの幅を変えると次の動画のように画面幅に合わせて自動的に要素の幅も変わっていきます。
このようにmin()関数を使用すると、カッコ内の値から小さいほうの値が適用される、つまり値の最大値を決めることができます。
比較関数②・・・max()
続いてmax()関数です。
こちらはmin()関数と逆の関数でカッコ内の値から大きい方をとります。
下の例で確認していきましょう。
See the Pen Untitled by kota (@kota1459) on CodePen.
See the Pen Untitled by kota (@kota1459) on CodePen.
上記2つのコードはそれぞれwidthをいじっておりますが、どちらも150pxの値を入力しています。
そしてmax()関数の方は追加で50vwの値も加えています。
このようにmax()関数は2つの値を比較して大きい値を適用します。そのため、最小値を設定するとも言い換えられます。
比較関数③・・・clamp()
最後にclamp関数についてです。
こちらは先に説明した2つを合わせたような挙動を設定できます。
値は(最小値、推奨値、最大値)となります。
下の例で使い方を確認していきましょう。
See the Pen Untitled by kota (@kota1459) on CodePen.
See the Pen Untitled by kota (@kota1459) on CodePen.
今回はclamp(150px, 50vw, 300px)と記述しています。
こうすることで要素は150px以下にはならず、300px以上になることもありません。また、要素が150px～300pxの範囲内に収まるようであれば50vwが適用されるように設定されています。
clamp()の何が便利なのかというと、メディアクエリを使用しなくても、最適なサイズを設定できるという点です。
これは特に文字サイズを設定する際にとても便利です。
下記2つのコード例を見比べてください。
See the Pen Untitled by kota (@kota1459) on CodePen.
See the Pen Untitled by kota (@kota1459) on CodePen.
上のコードはclampを使わず、文字サイズをvwのみで記述しています。
それに対して、下のコードはclampを使って最大と最小サイズを決めています。
そのため、スマートフォンのような小さい画面でも最低限(今回の場合1rem)の文字サイズが保証されるようになります。clampを使わない場合、vwでは際限なく文字サイズが小さくなってしまいます。
clamp()を応用することで、文字サイズだけでなく、marginを変えたりもできるので幅広く使えると思います。
メディアクエリは不要になるのか？
メディアクエリ(@screen and ~~)が担う役割は比較関数を使うことで少なくはなりますが、なくなることはないです。
例えば、PC画面では3カラム構成のHPでも、スマホサイズでは1カラム構成にしたい場合にはどうしてもメディアクエリを必要とします。
ただ、筆者自身も比較関数を使い始めてからレスポンシブ対応が明らかに楽になるのを実感しました。
また、コード自体も見やすくなるというメリットも感じたので、比較関数はおすすめできます。
皆さんも比較関数やメディアクエリを上手に使ってより見やすいコード、編集しやすいコードを記述できるように心がけていきましょう。
まとめ
今回はCSSの比較関数について紹介しました。
今まで、フォントサイズをメディアクエリを使って調整していた人は試しに比較関数を使って記述してみてはいかがでしょうか。
レスポンシブ対応の手間が減ることが実感できると思います。
最後までご覧いただき、ありがとうございました。
当サイトではフリーランスを目指す人のためのプログラミング教材の作成を心掛けてサイト運営を努めております。
別途、動画も出す予定で、そちらでは初心者向けに一からコーディングの解説を行っておりますので、
興味があればご覧いただければと思います。
【クレジット】
VOICEVOX：ずんだもん
立ち絵素材：ヒザフライ様
VOICEVOX：春日部つむぎ
立ち絵素材：ヒザフライ様
