【CSS】clamp()を使ったレスポンシブデザイン

clamp()はCSSで使われる関数。フォントサイズなどの値に最小値と最大値を設けたうえで、理想値を指定できるツールです。特にレスポンシブデザインでは、メディアクエリより高い柔軟性と簡潔さから注目されています。本記事では、この関数の使い方を実例を交えつつ簡単に説明します。

clamp(min, preferred, max)
/*
min: 最小値
preferred: 理想値
max: 最大値
*/

clamp()関数の実装例

実際の用例を見たほうが理解しやすいと思うので、いくつか実装例を公開します。

フォントサイズの調整

clamp()を使うことで、画面サイズに応じて適切なフォントサイズを設定できます。

<p>画面サイズに応じてフォントサイズが変わります。</p>
<p>最小値: 12px / 理想値: 2.5vw / 最大値: 24px</p>

p {
  font-size: clamp(12px, 2.5vw, 24px);
}

• 画面幅が狭いとき：フォントサイズを小さく表示（ただし、12pxより小さくはならない。）
• 画面幅が広いとき：フォントサイズを大きく表示（ただし、24pxより大きくはならない。）

余白やパディングの調整

clamp()を使うことで、画面サイズに応じた適切なパディングに調整することもできます。

<div class="outer">
  <div class="inner">
  </div>
</div>

.outer {
  padding: clamp(10px, 2vw, 20px);
  width: 100%;
  height: 200px;
}

.inner {
  background-color: skyblue;
  width: 100%;
  height: 100%;  
}

• 画面幅が狭いとき：パディングが小さい（ただし、10pxより小さくはならない。）
• 画面幅が広いとき：パディングが大きい（ただし、20pxより大きくはならない。）

要素の幅の調整

clamp()を使うことで、ビューポートの幅に応じて要素の幅を動的に変更することも可能です。

<div class="box"></div>

.box {
  width: clamp(100px, 50vw, 300px);
  height: clamp(200px, 50vh, 400px);
  background-color: limegreen;
}

• 画面幅が狭いとき：要素が小さくなる（ただし、幅100px / 高さ200px より小さくはならない。）
• 画面幅が広いとき：要素が大きくなる（ただし、幅200px / 高さ400px より大きくはならない。）

まとめ

以上、clamp()関数の使用方法について簡単にご紹介しました。

フォントサイズ、余白、パディング、要素の幅などのプロパティであれば、複雑なメディアクエリを使わずに動的なスタイリングを行うことができます。よりスムーズで適応力のあるデザインが可能になるので、ぜひ試してみてください。