2020/06/09

【CSS】max-font-sizeやmin-font-sizeを使いたくなったら

こんにちは！vwは信じるけどvhは信頼できないMizutani(@sirycity)です。アドレスバーの挙動とか考えるのめんどくさいし...

今日はcssのfont-sizeを柔軟に指定できるmax-font-sizeとmin-font-size(に準ずる記述)についてです。

結論

font-sizeを16pxにしたいけど、2vwより大きくはしたくない場合はこう書こう！

<div class="foo">この文字は16px、でも2vwよりは大きくしたくない</div>

.foo {
  font-size: min(16px, 2vw);
}

1vwより小さくはしたくない場合はこう！

.foo {
  font-size: max(16px, 1vw);
}

1vwより大きくしたいけど2vwより小さくしいたい場合はこう！

.foo {
  font-size: clamp(1vw, 16px, 2vw);
}

最大いくつとか最小いくつとかを定義するCSSプロパティにいはmax-widthやmin-heightがあります。これは良く使いますね！

例えば、横幅1000pxの画像を配置したいけど横幅はスマホからはみ出したくない時。こんな感じに書いたりしますかね？

<img class="foo" />

.foo {
  width: 1000px;
  max-width: 100%;
}

こうすれば、基本横幅は指定した通りの1000pxになるけど画面の横幅(100%)を超えては表示されないってスタイルになります。まあこの程度は基本ね。

max-font-sizeって名前のプロパティはありません。widthやheightにはあるのに。ちょっと簡単なコードで試してみよう。

大きさ1000pxの巨大な文字を書いてみましょう。文字は何にしよう。このご時世だし「密」とかでいいかな？

<div class="foo">密</div>

.foo {
  font-size: 1000px;
}

フォントサイズ1000px、巨大な密の完成です。これをさっきのmax-widthと同じように最大サイズを100%に指定してみましょう。こんな風に...？

.foo {
  font-size: 1000px;
  max-font-size: 100%;
}

...こんな風に。できたらいいのにね。でもできないです。そんなプロパティないから。

ところがどっこい、このないはずのmax-font-sizeを再現する方法があるんです。それがこのCSS関数、max、min、clampです。CSS関数っていうとcalc()とかと同じやつですね。

使い方はこんな風。まあこれだと絶対20pxになるけど。

.foo {
  font-size: max(10px, 20px);
}

minはmaxの逆。clampは(この値以上, 基本はこの値, この値以下)みたいな感じ。minとmaxの合わせ技ね。

さっそくmin()を使ってmax-font-sizeを表現...したい所だけど、まずは分かりやすくmax-widthをmin()使ったバージョンに置き換えてみます。どうぞ。

.foo {
  width: 1000px;
  max-width: 100%;
}

.foo {
  width: min(1000px, 100%);
}

この2つが同じ挙動になります。max-がmin()になるのでちょっと間違えやすいね。でもこれだけ。簡単！

本題です。max-font-sizeバージョンをどうぞ。

.foo {
  font-size: 1000px;
  max-font-size: 100%;
}

.foo {
  font-size: min(1000px, 100%);
}

どうでしょう。上のやつは勿論動かないです。max-font-sizeなんてないからね。でも下のはちゃんと動く。使ってみてね。本題は以上。

caniuse参照。IEは勿論対応してないけど、それ以外でもちょいちょい対応してない。

ブラウザによってはfont-sizeに暗黙の最小サイズがあります。min-font-sizeを使う時は意図した挙動にならないかも。でもまあ、極端に小さいサイズの文字なんて読めないしこの仕様はむしろ有り難い...のかな？