clamp() でレスポンシブ対応
メディアクエリを使わずに、画面幅に応じてフォントサイズや余白を滑らかに変化させる clamp() を学びます。
レスポンシブ対応
PCでは大きく表示したいけれど、スマホでは画面幅に収まるよう小さくしたい。
こういった目的のために「画面幅に応じてサイズを変える」ことをレスポンシブ対応と呼びます。
レスポンシブの2つのアプローチ
CSSでレスポンシブ対応を実現する主要な方法は2つあります。
| 方法 | 変化の仕方 | 得意なこと |
|---|---|---|
| メディアクエリ（@media） | ブレークポイントで切り替わる | レイアウトの構造変更（表示/非表示、縦並び↔横並び） |
| クランプ（clamp()） | 画面幅に応じて滑らかに変化する | フォントサイズ、余白、幅などのサイズ値 |
どちらが優れているかではなく、得意な場面が違います。このレッスンでは両方の特徴を理解した上で、clamp() の書き方を学びます。
この2つ以外に、コンテナクエリ（@container）という方法もあります。
メディアクエリが「画面全体の幅」で切り替えるのに対し、コンテナクエリは「親要素の幅」で切り替えます。
メディアクエリはブレークポイントで「切り替える」
メディアクエリ（@media）は、画面幅がある値を超えたらスタイルを切り替える方法です。
h1 {
font-size: 18px;
}
@media (min-width: 768px) {
h1 {
font-size: 32px;
}
}これは「画面幅が768px以上になったら、h1 のフォントサイズを32pxに変える」という意味です。
この方法でも目的は達成できますが、1つ問題があります。
| 画面幅 | フォントサイズ | 変化 |
|---|---|---|
| 767px | 18px | |
| 768px | 32px | ← ここで一気に14px大きくなる |
| 1920px | 32px |
768pxを境に、フォントサイズが一気に切り替わります。スライダーを動かして、768px付近で「カクッ」と変わる瞬間を確認してみましょう。
スマホやタブレットでご覧の場合、CSSが正常に反映されない場合があります。 ぜひ、PCでご確認ください！
メディアクエリはレイアウトの構造を切り替える場面で力を発揮します。「スマホでは縦並び、PCでは横並び」「スマホではメニューを隠す」といった、表示するかしないかの二択に向いています。
一方で、フォントサイズや余白のように少しずつ変えたい値には、次に紹介する clamp() が適しています。
clamp() は画面幅に応じて「滑らかに」変化させる
clamp() を使うと、画面幅に応じてフォントサイズが滑らかに変化します。
h1 {
font-size: clamp(1.125rem, 0.6rem + 2.2vw, 2rem);
}メディアクエリのような「境界線」はありません。画面幅に連動して、最小値と最大値の間を滑らかに移動します。
clamp() の3つの引数
clamp() には3つの値を渡します。
clamp(最小値, 推奨値, 最大値)| 引数 | 役割 | 例 |
|---|---|---|
| 最小値 | これより小さくならない | 1.125rem（18px） |
| 推奨値 | 画面幅に応じて計算される値 | 0.6rem + 2.2vw |
| 最大値 | これより大きくならない | 2rem（32px） |
実際のコードを分解してみましょう。
h1 {
font-size: clamp(1.125rem, 0.6rem + 2.2vw, 2rem);
}1.125rem（18px）: スマホでもこれ以上は小さくならない0.6rem + 2.2vw: ビューポート幅に応じて計算される値。1vwは画面幅の1%2rem（32px）: PCでもこれ以上は大きくならない
推奨値の 2.2vw がポイントです。画面幅が広がると vw の値も大きくなるため、フォントサイズが連動して変化します。
rem はルート要素（html）のフォントサイズを基準とした単位です。ブラウザのデフォルトでは 1rem = 16px です。
| 値 | 計算 | 結果 |
|---|---|---|
| 1.125rem | 16px × 1.125 | 18px |
| 2rem | 16px × 2 | 32px |
px ではなく rem を使う理由は、ユーザーがブラウザの文字サイズ設定を変更したときに、サイト全体のフォントサイズが連動して変わるようにするためです。アクセシビリティの観点から、フォントサイズには rem を使うのが推奨されています。
推奨値の計算式（1.25rem + 1vw のような部分）を自分で考えるのは大変です。最小値と最大値を入力すると、推奨値を自動計算してくれるツールがあります。
- Utopia — フォントサイズや余白のclamp()を自動生成
- clamp() Calculator — シンプルなclamp()計算機
最小値・最大値・対応する画面幅を入力するだけで、推奨値を含む clamp() 式が生成されます。
clamp() はフォントサイズ専用の機能ではありません。サイズを表すあらゆるプロパティに使えます。
/* 余白を滑らかに変化させる */
.section {
padding: clamp(0.75rem, 0.1rem + 3vw, 3.5rem);
}
/* コンテンツ幅を滑らかに変化させる */
.container {
max-width: clamp(20rem, 90%, 56rem);
}構成の概要を振り返ろう
メジャーなグローバルCSSの構成を理解できるようになりましたね。
/* 1. CSSリセット ✅ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* 2. ベーススタイル ✅ */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
/* 3. デザイントークン（CSS変数） ✅ */
:root { --background: #ffffff; --text: #171717; }
/* 4. ダークモードの色定義 ✅ */
.dark { --background: #171717; --text: #ffffff; }
/* 5. レスポンシブなサイズ定義 ✅ */
h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }次のステップ
1つのグローバルCSSファイルで管理していると、
アプリの規模が大きくなるにつれて管理が大変になりますね。
次のレッスンでは、CSSファイルが増えてきたときに読み込み順を整理する @layer を学びます。