syntax。
「「３/* 最大値 */」」
font-size:min(値,値);
「「３/* 最小値 */」」
font-size:max(値,値);
「「３/* 最大&最小値 */」」
font-size:clamp(最小値,可変値,最大値);
値に関数を使う。
こんにちは、「ふ」です。
今回はCSSのfont-sizeに、最大値と最小値を指定する方法について紹介します。
.h3 {
font-size:10vw;
}
font-sizeをvw(window幅を100vwとしたときの相対値)で指定することもあるでしょう。
この場合、window幅が広がるにつれ描画されるfont-sizeはどんどん大きくなっていきます。ある程度のところで、これ以上大きくならないように、font-sizeの最大値にリミットを設けたい。
その逆もあるかもしれません。font-sizeがこれ以上小さくなると、さすがに可読性が落ちてしまうので、最小値を指定しておきたい。
widthやheightであればmax-widthやmax-heightなど、最大/最小値をしてするプロパティが存在します。しかしながらいまのところ(2024年現在)、font-size専用の最大/最小値を指定するプロパティは用意されていません。
font-sizeの最大最小値を指定するには、値自体に関数を使用します。今回は、max/min/clamp関数を使って最大/最小値を指定する方法を紹介します。
SVGコーディングブック
Apple Booksでみる最大値はmin関数。
font-sizeの最大値を指定するには、値にmin関数を使用します。
「最大値なのにmin関数？逆では？」
〜と思うかもしれません。max/min関数は、max-widthやmax-heightとは、関数記述の仕組みが違っているのです。
element {
font-size:min(値,値);
}
min関数では、( )内の２つの値のうち、描画したときに小さくなるほうが採用される方式となります。
実際に試してみましょう。
<body>
<h1 class = "text1">
text
</h1>
<h1 class = "text2">
text
</h1>
.text1 {
font-size:10vw;
color:#bbb;
}
.text2 {
font-size:min(「「１10vw,80px」」);
}
テキスト要素を２つつくりました。
上の<h1>のfont-sizeは10vwに固定。colorを薄いグレーにしています。
下の<h1>のfont-sizeの値にはmin関数をつかい、引数(括弧内の値)を10vwと80pxにしています。
▪️window幅：500px
現在window幅は500pxです。
上の<h1>のサイズは、10vwなので50px。
下の<h1>はどうなっているかというと、
font-size:min(10vw,80px);
２つの引数を比べてみると、10vw = 50px < 80pxとなるため、小さいほうの10vwが採用されています。
window幅を1000pxにしてみましょう。
▪️window幅：1000px
２つの<h1>の大きさに違いが出ました。
上の<h1>は10vwに固定されているので、(1000pxに対する10vw ) = 100pxで表示されます。
いっぽう下の<h1>はというと、10vw = 100px > 80pxとなるので、小さいほうの80pxが採用されます。
▪️window幅：800px
⬆︎はwindow幅800pxで表示したもの。
このとき、10vw = 80pxとなるため、min関数の２つの引数が同じ大きさとなります。
つまりここがブレークポイント。
window幅が800px未満であれば、10vw < 80pxなので、10vwが採用されて表示されます。
window幅が800pxより大きくなると、10vw > 80pxとなるため、80pxが採用されます。
結果としてfont-sizeには「最大80px」のリミッターが掛かることになります。これがmin関数で最大値を指定する仕組みです。
element {
font-size:min(可変値、最大値)
}
片方の引数に可変する値、もう片方の引数にそれ以上大きくしたくない値を入れておくことで、「可変しつつ、大きさの上限もあるfont-size」を実装することができます。
もちろん、引数の順序は問いません。
最小値はmax関数。
element {
font-size:「「１max」」(値,値);
}
逆にfont-sizeに最小値を設定したい場合には、max関数を利用します。
max関数は、２つの引数のうち表示したときに大きくなるほうが採用されます。
仕組みは最大値のときの逆作用となります。先ほどの２つの<h1>要素に指定して、挙動を観察してみましょう。
<body>
<h1 class = "text1">
text
</h1>
<h1 class = "text2">
text
</h1>
.text1 {
font-size:10vw;
color:#bbb;
}
.text2 {
font-size:max(「「１10vw,80px」」);
}
１つ目の<h1>のfont-sizeは「10vw」に固定。２つ目の<h1>要素にはmax関数を使い、引数には10vwと80pxを指定しました。
▪️window幅：1000px
window幅1000pxです。max関数では引数２つのうち大きく表示される方が選択されます。
10vw = 100px > 80pxであるため、font-sizeは100pxとなります。
▪️window幅：800px
window幅800px、ここがブレークポイントです。
10vw = 80px = 80pxで、２つの引数のサイズが等しくなります。
▪️window幅：500px
window幅500pxです。ブレークポイントの800pxよりも小さくなっているので、10vw < 80pxとなり、80pxのほうが採用されます。
element {
font-size:max(可変値、最小値);
}
最小値を指定する場合にはmax関数の片方の引数に可変する値、もう片方の引数にこれ以上小さくしたくない値を入れておきます。それにより「可変しつつ、最小の制限もあるfont-size」を実装することができます。
両方指定、clamp関数。
element {
font-size:clamp(最小値、可変値、最大値)
}
最大値と最小値を同時に指定したいときは、clamp関数をつかいましょう。
引数には「最小値」「可変値」「最大値」の３つを記述します。
clamp関数の引数は順番厳守となっているので注意してください。また最大値と最小値が矛盾していても、うまく機能しません（最小値が最大値より大きくなっている、など）。
<body>
<h1 class = "text1">
text
</h1>
<h1 class = "text2">
text
</h1>
.text1 {
font-size:10vw;
color:#bbb;
}
.text2 {
font-size:clamp(「「１60px,10vw,80px」」);
}
おなじみ、１つ目の<h1>のfont-sizeは10vwに固定。
２つ目の<h1>には最小値：60px、可変値：10vw、最大値：80pxとしました。
このバヤイ、「最大値のブレークポイント」「最小値のブレークポイント」の２つが存在することになります。
・「最大値 = 可変値」となるwindow幅、800px
・「最小値 = 可変値」となるwindow幅、600px
〜様子を観察してみましょう。
▪️window幅：1000px
widndow幅1000pxから、徐々にせまくしていきます。。
この時点において可変値だと100pxとなり、最大値に指定した80pxをオーバーしてしまうため、リミットの80pxとなります。
▪️window幅：800px
最大値のブレークポイント。window幅800pxのとき、10vw = 80pxで、最大値と可変値が等しくなります。ここから可変値の10vwが採用されるようになります。
▪️window幅：600px
最小値のブレークポイント、window幅が600pxになりました。
ここまでは可変値である10vwが最大値-最小値の範囲におさまるため、可変値が採用されます。
▪️window幅：500px
最小値のブレークポイントよりも小さい、window幅500px。
こうなると10vwの50pxは最小値の60pxを下回るため、リミッターが発動して60pxが扱われます。
element {
font-size:clamp(最小値、可変値、最大値)
}
つまりclamp関数では、最大/最小値のブレークポイント間は可変し、その外側では最大/最小値が採用される、という仕組みになっています。
font-sizeだけではない。
最後までお読みくださり、 ありがとうございました。
今回紹介したmax/min、そしてclamp関数。これらはfont-sizeのみならず、marginなど他の大きさを指定するプロパティなどにも利用することができます。
ただその仕組みは少し複雑でとっつきにくい仕組みでもあるため、記事にさせていただきました。３つの値関数、困ったときに役立ちそう。覚えておいてください。ブレークポイントを意識して設計すれば、目的に応じた実装がしやすいです。
ではまた〜 🎵
「ふ」です。
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。