clamp使い方　cssフォントサイズで使ってみる | 福岡のホームページ制作はマリオ君にお任せ

今回はcssの関数であるcssのclampの使用方法を少し勉強したので共有させていただきます。

先日、社内でフォントサイズの事で井戸端会議をしました。その時に少しフォントサイズについて検索して勉強していかないといけないなということで、calmpをフォントサイズでの使用方法を考えてみました。

今まで、正直ほとんど利用してきていませんでした。理由としてはIEでサポートされていなかった（今はもうないから大丈夫）となんといっても推奨値の意味・使い方がよくわからなかったからです。

今回は記入例と使用方法（こうやって使う？）を紹介したいと思います。いまだにどの状況で使用するかよくわかっていない感じなので参考程度に見てください。

フォントサイズに関しての記述方法は下記で考察しておりますので、気になる方はご覧ください。

関連こっちもみてね

フォントサイズ結局どれがいい？px?rem?勝手にきめてみた

cssのclampとは

calmpはCSSの関数で、レスポンシブデザインなどを制作する際に、最小値と最大値内で可変で数字を設定することができます。

書き方はこんな感じ

clamp(最小値を入れる, 推奨値を入れる, 最大値を入れる);

今回はフォントサイズで使用しますので

font-size:clamp(最小値を入れる, 推奨値を入れる, 最大値を入れる);

という感じで入れます。横幅とかのwidthとかにも使えます。

フォントサイズにvwを入れた時も可変になりますが、clampとの違いは、vwで記述した際は最大値と最小値がないので、無限に大きくなり、無限に小さくなります。

clampはその無限に大きくなったり、無限に小さくなることを防ぐことができます。

clamp記入例

次は記入例を見ていきます。

font-size:clamp(13px, 2.5vw, 20px);

最小値が13pxです。これ以上フォントサイズが小さくなることはありません。
最大値は20pxです。これ以上フォントサイズが大きくなることはありません。

真ん中の推奨値は2.5vwを例で入れています。

最小値・推奨値・最大値をそれぞれ,カンマで区切って記入します。

推奨値に使用している単位のvwは画面サイズの横幅の数値を相対的に参照します。
※推奨値には絶対値であるpxは利用しないでください。

100VWが画面サイズ横幅いっぱいになります。

画面サイズが1000pxの場合は

2.5vw＝25px（1000×0.025＝25px)になりますので、

推奨値が25pxとなり、最大値を超えているので

フォントサイズは最大値に記入している20pxとなります。

最大値と最小値の間で推奨値が機能しますので

可変するのは画面の横幅が520px（520×0.025＝13px)～800px（800×0.025＝20px)の間ということになります。

画面サイズが680pxの場合は

2.5vw=17px(680×0.025＝17px)になりますので

最小値・最大値ともに超えていませんので

17pxで表示されます。

こんな感じです。便利ですね。

しかし

自分的には正直意味は理解できているのですが、どうやって使うのが常にありました。

推奨値に何いれるのって。そしてどの場面で使うのって。

clamp使用例？

使用例を書かせていただきます。

こんな時に使うのかな？って感じを紹介します。
弊社で使う場合はこれかな？の例となります。

前提
弊社はほとんどのサイトはなんちゃってフレキシブルレイアウトでwebサイトを作成しています。フォントは非可変
※フレキシブルレイアウトは横幅の最大値（max-width)を決めてその中でリキッド（100％）で表示させる感じで制作

基本的なブレイクポイントは
768pxのみが基本でフォントサイズをここで切り替えている

その他は、極端なレイアウト崩れ等がある場合は対応

フォントサイズは1rem=10pxで設定

の感じで作っています。

それでは使用方法を検討？していきます。

見出しで使う例です。

見出しなどの設定はこんな感じで普段書いています。

h2{
	
	font-size: 4.5rem;
	@media screen and (max-width: 768px){
				font-size: 3.0rem;
	}
}

768px以上は4.5remで表示されて
768px以下は3.0remで表示されます。

こちらはブレイクポイントで切り替わりますが、可変ではありません。

これを可変にしていきたいと思います。

可変にするにあたり、横幅の最大値を決めます。当サイトマリオ君のデザインされている横幅の最大値は1200pxです。max-width:1200px;を入れています。

1200pxをフォントサイズのマックス（4.5rem）としてそこからブレイクポイントの768pxに向けてフォントサイズをすこしずつ下げるよう（3.0remに向けて）にclampで書いていきます。
推奨値にはcalcが使えるようなのでこんな感じ

font-size: clamp(3.0rem,calc((45 / 1200) * 100vw), 4.5rem);

推奨値の部分の45はフォントサイズの最大値です。弊社は1rem=10pxで設定しているのでマックスのフォントサイズ4.5remをpxに直した数字を入れています。

1200は横幅の最大値です。

calcの計算式を使わずに直接入力するなら3.75vwになります。

これで横幅が1200pxから徐々にが小さくなるにつれて、フォントサイズが3.0remを下限に小さくなっていきます。

最大のフォントサイズ　÷　最大フォントの画面サイズの上限　✕　100vw

以上になります。

これで可変にはなりましたが、そもそも弊社の作り方ではあまりフォントサイズを可変にするメリットを感じていないので、clampは便利だと思いますが、どこで使っていいかわからない状態です。

ネットで検索すると、たくさんのブレイクポイントを作らなくていいから便利とか１行で済むから便利とか色々ありましが、弊社的にはそんな複雑なサイトは作らないし（作れないし）、細かなところはやっぱりブレイクポイントで数値を打ち直さないといけなし、どこで使っていいのやら・・・て感じでした。
※リキッドレイアウトやもっとダイナミックに横幅を使ってデザインするサイトには使えそうですね

今回の記事はまさにタイトルの「為にならないブログ」を体現したような記事になりました。

それではまた。