メディアクエリ不要！CSSのclampを活用したブラウザ幅に応じたwidthとfont-sizeの最適設定法｜DAD UNION

CSSの関数を使った画期的なレスポンシブデザインのテクニックを紹介します。メディアクエリを使わずに、ブラウザの幅に応じた最適なwidthとfont-sizeを設定する方法です。これをマスターすることで、より効率的かつ柔軟なウェブデザインが可能になります。

Contents

clamp関数とは？
メディアクエリとの違い
CSS記述例
HTML記述例
clampを使ってメディアクエリを使わずブラウザ幅によってwidthとfont-sizeの最小値、推奨値、最大値を設定するデモページ
実用性の高さ
まとめ

clamp関数とは？

CSSのclamp関数は、3つのパラメーター（最小値、推奨値、最大値）を用いて、要素のサイズを動的に調整します。これにより、画面サイズの変化に柔軟に対応するレスポンシブデザインが実現できます。具体的には、例えば見出しのfont-sizeを設定する際に、ブラウザ幅が変化しても読みやすさを保つことが可能です。

メディアクエリとの違い

従来のメディアクエリでは、特定のブレークポイントに基づいてスタイルを変更します。しかし、clampを使用すると、画面サイズが変わるたびに、最小値と最大値の間でスタイルが連続的に変化します。これにより、より自然で滑らかなレスポンシブ体験が提供できます。

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>

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>