【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);
}
max-widthやmin-heightについて
最大いくつとか最小いくつとかを定義するCSSプロパティにいはmax-widthやmin-heightがあります。これは良く使いますね!
例えば、横幅1000pxの画像を配置したいけど横幅はスマホからはみ出したくない時。こんな感じに書いたりしますかね?
<img class='foo' />
.foo {
width: 1000px;
max-width: 100%;
}
こうすれば、基本横幅は指定した通りの1000pxになるけど画面の横幅(100%)を超えては表示されないってスタイルになります。まあこの程度は基本ね。
max-font-sizeはない
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を再現するには
ところがどっこい、このないはずのmax-font-sizeを再現する方法があるんです。それがこのCSS関数、max、min、clampです。CSS関数っていうとcalc()とかと同じやつですね。
使い方はこんな風。まあこれだと絶対20pxになるけど。
.foo {
font-size: max(10px, 20px);
}
minはmaxの逆。clampは(この値以上, 基本はこの値, この値以下)
みたいな感じ。minとmaxの合わせ技ね。
max-widthをmin()に置換
さっそくmin()を使ってmax-font-sizeを表現...したい所だけど、まずは分かりやすくmax-widthをmin()使ったバージョンに置き換えてみます。どうぞ。
.foo {
width: 1000px;
max-width: 100%;
}
.foo {
width: min(1000px, 100%);
}
この2つが同じ挙動になります。max-がmin()になるのでちょっと間違えやすいね。でもこれだけ。簡単!
max-font-sizeを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を使う時は意図した挙動にならないかも。でもまあ、極端に小さいサイズの文字なんて読めないしこの仕様はむしろ有り難い...のかな?
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介