バナーテキストのフォントサイズを拡大・縮小させる

【正社員】WEBデザイナー
受付事務スタッフのアルバイト
/パート募集

lamp()関数は、フォントサイズに最小値、推奨値(動的な値)、最大値を設定できるため、最も柔軟で強力な方法です。これにより、画面サイズに応じてスムーズにサイズが変化しつつ、極端に小さくなったり大きくなったりするのを防げます。

・16px: 最小フォントサイズ。これより小さくなることはありません。
・3vw: 推奨フォントサイズ。ビューポート(表示領域)の幅の3%として計算されます。画面幅に応じて動的に変化します。
・30px: 最大フォントサイズ。これより大きくなることはありません。

#test {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	column-gap: 4%;
	row-gap: 0;
}
#test > div {
	border: 1px solid #000;
	padding: 4em 0em;
	text-align: center;
	font-weight: bold;

	/* 最小フォントサイズ: 16px */
	/* 推奨フォントサイズ: ビューポート幅の 3% (3vw) */
	/* 最大フォントサイズ: 48px */

	font-size: 30px;
	font-size: clamp(15px, 2.8vw, 30px);
}