くまだどうも、くまだ です。
レスポンシブする際に、それぞれメディアクエリあててスタイルしていくと思うんですけど、見出し関係も同様にブレイクポイントごとにスタイルしていきますが、もっと楽な方法はないもんかと。
それで、実際案件で使ったことはまだないんですけど、
- max()
- min()
- clamp()
というCSSの比較関数というものがあることを最近知って、よさそうな感じがしました。
（使うとは言ってない）
CSSの比較関数 – min() –
比較関数ではcalcはよく使いますが、上記の3種類は使ったことがなかったです。
min関数は、カンマで区切られた値の中から、最小の値を設定できるようです。。
文章だけ読むと難しいんですが、実際にやってみればよい。
ということで、例えば長い文章の見出しがあったときに、改行しないで1行で納めたい、というケースで使ってみる。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">見出しです。長い見出しです。見出しです。長い見出しです。</h1>
</body>
</html>.title {
font-size: min(2.4vw ,40px);
}See the Pen min() by kuma0605 (@kuma0605) on CodePen.
数字は特に調整していないのですが、端末幅によって、中で設定したpx以上（上記では40px）は大きくならず、40px以下が可変する。
min(基本サイズ, 最大値);という感じで使えそう。
CSSの比較関数 – max() –
CSSだけ以下のように変更。min()がmax()に変えました。
.title {
font-size: max(1.6vw, 16px);
}See the Pen max() by kuma0605 (@kuma0605) on CodePen.
こちらは狭い端末幅だとフォントサイズは可変しません(16px以下にならない)が、端末幅を広げると可変します。
max(基本サイズ,最小値);というところでしょうか。
CSSの比較関数 – clamp関数 –
そしてこちらがmax()とmin()の合わせ技っぽい関数。
.title {
font-size: clamp(10px, 2vw, 24px);
}
See the Pen clamp by kuma0605 (@kuma0605) on CodePen.
狭い幅では10px以下にはならず、広い幅では24px以上にならず、その間は可変します。これをうまく調整すればブレイクポイントごとに調整しなくてもよさそうな感じはします。タブレットサイズにおいて可変させることもこれで実現できそうです。
clamp()は、clamp(最小値, 可変,最大値);という感じ。
Sassで使うときの注意
ただし、Sassで使う場合にはコンパイルエラーでそのままの形で使えないので、
.title {
font-size: unquote("min(2.4vw ,40px)");
}上記のような形で使うとちゃんとCSSでmin();として出力されて使えます。max()も同様です。
ちなみにclamp関数はそのまま使えるみたいです。
あとは実際に案件等で使ってみて、使えそうだったら使ってみます。
ここまで読んでくださりありがとうございました。