clamp(最小値,推奨値,最大値)を使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定する方法をご紹介します。
Contents
clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するCSS記述
※CSSのclamp()関数は左から最小値、推奨値、最大値の3つの値を設定できます。
以下は見出し(h1、h2)のfont-sizeをブラウザ幅の3vw=3%を推奨値として、ブラウザ幅3vwが12pxより小さい場合最小値12px、40pxより大きい場合最大値40pxを適用させます。
その他、画像エリア(div)のサイズはブラウザ幅(100vw=100%)が200px~1000px時はブラウザ幅の80vw=80%、ブラウザ幅80vwが200pxより小さい場合最小値200px、ブラウザ幅80vwが1000pxより大きい場合最大値1000pxを適用させる記述です。
<style> body{ padding: 0; margin: 0; } h1{ line-height:1.6em; text-align:center; font-weight:bold; padding: 15px 0 0 0; font-size:clamp(12px, 3vw, 40px); } h2{ line-height:1.6em; text-align:center; font-weight:bold; padding: 40px 0 6px 0; font-size:clamp(12px, 3vw, 40px); } div{ width: clamp(200px, 80vw, 1000px); margin: 0 auto; } </style>
clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するHTML記述
※見出し(h1、h2)と画像エリア(div)を用意してます。必要に応じて変更して下さい。
<h1>見出しタイトルのfont-sizeはブラウザ幅の3vw=3%を推奨値として、ブラウザ幅3vwが12pxより小さい場合最小値12px、40pxより大きい場合最大値40pxを適用</h1> <h2>以下の画像サイズはずブラウザ幅(100vw=100%)が200px~1000px時はブラウザ幅の80vw=80%、<br>ブラウザ幅80vwが200pxより小さい場合最小値200px、<br>ブラウザ幅80vwが1000pxより大きい場合最大値1000pxを適用</h2> <div><img src="1.jpg" width="100%"></div>
clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するデモページ
clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するデモページ
ブラウザや画面幅に対してfont-size等の比率を保って可変するので、メディアクエリを使用せずに最小値、推奨値、最大値サイズを設定出来るので便利です。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告