【初心者向け】CSS clamp()とは? 画像サイズ・文字サイズを自動調整する方法｜メディアクエリとの使い分けを解説

スマホでもPCでも見やすいサイトを作るには、画像や文字のサイズを自動で調整する必要があります。
本記事では、CSSで画像サイズや文字サイズを画面幅に応じて自動調整する方法として、
注目のclamp()関数や@media queryの使い分けについて、初心者向けにわかりやすく解説します。

画像サイズを自動調整する方法

① 基本的な設定方法

まず、画像サイズを画面幅に応じて自動調整するには、以下のようなスタイルが有効です。

img { 
  width: 100%; 
  height: auto; 
  min-width: 200px;
  max-width: 600px; 
}

• width: 100%：親要素の幅に合わせて画像サイズが変わる
• height: auto：アスペクト比を維持
• min-width：画像が小さくなりすぎないよう制限
• max-width：画像が大きくなりすぎないよう制限

画面幅によって可変させたい場合は、clamp()との組み合わせが便利です。

② clamp()を使った画像サイズの設定方法

img.responsive { 
  width: clamp(200px, 50vw, 600px); 
  height: auto; 
}

値	意味
200px	最小サイズ（スマホ時）
50vw	推奨サイズ（画面幅の50%）
600px	最大サイズ（デスクトップ時）

👉 画面サイズに応じて滑らかに画像サイズが変化します。

文字サイズを自動調整する方法

① clamp()を使った文字サイズの設定方法

h1 { 
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 2rem); 
}

• スマホでは小さめ（1rem）
• タブレット〜PCで徐々に大きく
• 最大2rem(32px)を上限に制限

これだけで、メディアクエリを使わなくても文字サイズが滑らかに変化します。

② メディアクエリでの自動調整（比較例）

一般的な文字サイズの指定方法としてはメディアクエリを使用して、以下のように段階的にサイズを調整しているかと思います。

p { font-size: 14px; } 

@media (min-width: 768px) {   
  p { font-size: 16px; } 
} 

@media (min-width: 1200px) { 
  p { font-size: 20px; } 
}

メディアクエリなど、レスポンシブCSSの基本に関しては、以下の記事でチェック!

【初心者向け】レスポンシブCSSの基本と簡単テクニックまとめ

clamp()で同じ効果を得るには？

p { 
  font-size: clamp(14px, 2vw, 20px); 
}

③ clamp() と media query の違いを比較

比較項目	clamp()	@media query
実装	1行で完結	複数のブレークポイントが必要
サイズ変化	滑らかに変化	急に切り替わる
保守性	高い（変数化も容易）	規模が大きくなると複雑化
対応範囲	サイズに最適	複雑なレイアウト調整も可能

clamp() 使用時のコツと注意点

• vwやvhとの併用が効果的
• font-sizeやwidthなど「スケーラブルな値」に適している
• IE11では未対応（現代のWebではほぼ問題なし）
• 途中の画面サイズで思ったサイズ感に調整できない!

補足 : vw (vh) と rem について

vw（Viewport Width）

画面の横幅に対する割合を表す単位。

• 1vw = ビューポート幅の1%
• 画面幅に連動して「なめらかに変化」する
• フォントや画像サイズをレスポンシブに変えるのに最適
• ビューポートの高さの場合はvh (Viewport Height)

font-size: 4vw; /* 画面幅の4%で文字サイズが決まる */

注意点：スマホやタブレットなど、画面幅が狭い端末で極端に小さくなりがち。

---

rem（Root em）

HTMLのルート要素（通常はhtml）のフォントサイズを基準とした単位。

• デフォルトでは 1rem = 16px（ブラウザ依存）
• デザインの一貫性が保ちやすい
• アクセシビリティや可読性にも強い

font-size: 1.5rem; /* 16px × 1.5 = 24px */

注意点：固定サイズなので画面幅には連動しない

まとめ｜画像・文字サイズをCSSで自動調整するならclamp()が便利！

• 画像も文字も、clamp()で1行で自動調整可能
• メディアクエリと比べて実装がシンプルで保守性も高い
• clamp()は今後のモダンなレスポンシブCSSの基本となり得ます
• 途中のレスポンシブでも固定のサイズ感を保ちたい場合は使用は控えるべき!

この記事の振り返りFAQ

関連リンク

• MDN Web Docs – clamp()
• Can I use – clamp() 対応状況