はじめに

こんにちは、AndHAコーディング部です。

先日の2022年6月16日にMicrosoft社のInternet Explorerのサポートが終了するという事がありました。
そこで今回は、今後ガンガン使っていける「意外に便利なCSS」をご紹介いたします！

高さをチェックするメディアクエリ

普段コーディングしていて、幅に対しては頻繁にメディアクエリを使用しますよね？
例えば下記

@media (min-width: 768px) {
  .sample {
    /* 769px以上の幅になったら指定したいスタイル */
  }
}

レスポンシブデザインをする上で、あらゆるデバイスや画面幅でもちゃんとみれるWebページを実装するのはユーザーのためにも必須条件です。

ただ、幅だけに対応していれば良いかというとそんなこともありません。デバイスの高さは以外にも気にしていないなんてことありませんか？
そんな時は「高さをチェックするメディアクエリ」もあります。

@media (max-height: 600px) {
  .sample {
    /* 600px以下の高さになったら指定したいスタイル */
  }
}
 
@media (min-height: 600px) {
  .sample {
    /* 600px以上の高さになったら指定したいスタイル */
  }
}

幅に囚われがちですが、「幅」と同じくらい「高さ」もレスポンシブデザインでは重要だと思います。
自分が作成したページを高さを可変してみてみると崩れているなんてことがあるかもしれせん、、、、もう一度チェックしてみましょう！

min()関数、max()関数、clamp()関数

例えばフォントサイズをvwにしている場合、

.sample {
	font-size: 2vw;
}

画面幅が大きくなればなるほどフォントサイズも大きくなってしまうため、「こんなに大きくならなくていいよ〜」ってことありますよね。(逆も然り)
font-sizeにもwidthとかheightみたいにmax-widthとかmax-heightがあってもいいじゃないかと。
そんなときに便利な３つのCSS関数を紹介します！

min() 関数

.sample {
	font-size: min(2vw, 24px);
	/* min(基本サイズ(可変)、最大サイズ) */
}

上記のように指定すると、基本サイズは2vwに指定しているので画面幅に応じて大きくなったり小さくなったりしますが、最大サイズを24pxに指定しているので、24px以上になることはありません。
min() – CSS: カスケーディングスタイルシート | MDN

max()関数

.sample {
	font-size: max(2vw, 12px);
	/* max(基本サイズ(可変)、最小サイズ) */
}

max()関数は、min()関数とは逆で、基本サイズは2vwに指定しているので画面幅に応じて可変しますが、12px以下になることはありません。
max() – CSS: カスケーディングスタイルシート | MDN

clamp()関数

最小値と最大値を指定する場合も紹介します。

.sample {
	font-size: clamp(12px, 2vw, 24px);
	/* clamp(最小サイズ、基本サイズ(可変)、最大サイズ) */
}

clamp()関数の場合、min()関数、max()関数同様、基本サイズは2vwですので画面幅に応じて可変しますが、12px以下、24px以上にはなりません。
clamp() – CSS: カスケーディングスタイルシート | MDN

まとめ

今回は「以外に便利CSS」を紹介いたしました。
まさにかゆいところに手が届くCSSだと思います！使うタイミングがどこかしらで出てくると思うので頭の片隅いれておきましょう！