最終更新日
記事公開日

「font-max-size」というCSSはないので、「min」で文字サイズの最大値を設定

font-max-sizeのような文字サイズ最大値を設定できるCSSってないの?

残念ながらありません。

しかし、min()を使うことで最大文字サイズを設定することが可能です↓

#container {
	max-width:960px;
}
#container p {
	font-size:min(3.5vw, 2em);
}
<div id="container">
	<p>文字</p>
</div>

例えば「font-size:3.5vw」とだけ文字サイズを指定した場合、大画面ディスプレイでは、非常に大きな文字で表示されてしまいます。

そこで、containerで画面の最大幅を決めておき、今回のmin()で文字サイズを指定しておくと、レスポンシブできれいに収まります。

SAMPLE

関連情報

運営者プロフィール
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール