【初心者向け】CSSのclamp()関数でレスポンシブデザインを楽にする実践ガイド

WEB制作

「スマホで見たらフォントが小さすぎる…」「タブレットだとレイアウトが崩れる…」そんな経験、ありませんか?

レスポンシブデザインの実装で、メディアクエリを何個も書いて疲れていませんか? 実は、CSSのclamp()関数を使えば、メディアクエリを大幅に減らしつつ、滑らかに可変するデザインが実現できます。

この記事で分かること:

  • clamp()関数の基本的な使い方と計算方法
  • フォントサイズ・余白・幅を可変にする実践テクニック
  • メディアクエリとの効果的な組み合わせ方

早く知りたい人はこちら:clamp()の結論

clamp()関数は「最小値・可変値・最大値」の3つを指定して、画面幅に応じて自動で値を調整してくれるCSS関数です。

基本構文:

  1. font-size: clamp(最小値, 可変値, 最大値);

すぐ使える実例:

  1. .title {
  2.   font-size: clamp(1.5rem, 4vw, 2.5rem); /* スマホ24px → PC 40px に自動調整 */
  3. }

これだけで、メディアクエリなしでレスポンシブなフォントサイズが実現します!

clamp()関数とは? 基礎知識

clamp()の仕組み

clamp()は3つの引数(最小値・推奨値・最大値)を受け取り、画面サイズに応じて自動で値を選択します。

  1. clamp(MIN, VAL, MAX)
  • MIN(最小値): これ以下にはならない下限
  • VAL(推奨値/可変値): 画面幅に応じて変化する値(通常vwやvh単位)
  • MAX(最大値): これ以上にならない上限

従来のメディアクエリとの違い

MIN・VAL・MAXの3つのボックスと伸縮アニメーション図解

従来のレスポンシブ対応では、ブレイクポイントごとにメディアクエリを書く必要がありました:

  1. /* 従来の方法:複数のメディアクエリが必要 */
  2. .title {
  3.   font-size: 1.5rem; /* スマホ */
  4. }
  5. @media (min-width: 768px) {
  6.   .title {
  7.     font-size: 2rem; /* タブレット */
  8.   }
  9. }
  10. @media (min-width: 1024px) {
  11.   .title {
  12.     font-size: 2.5rem; /* PC */
  13.   }
  14. }

clamp()を使えば、これが1行に:

  1. /* clamp()なら1行でOK! */
  2. .title {
  3.   font-size: clamp(1.5rem, 4vw, 2.5rem);
  4. }

コード量が減り、メンテナンスも楽になります!

対応ブラウザ

clamp()は主要モダンブラウザで広くサポートされています:

  • Chrome 79+ (2019年12月〜)
  • Firefox 75+ (2020年4月〜)
  • Safari 13.1+ (2020年3月〜)
  • Edge 79+ (2020年1月〜)

注意: IE11は非対応です。IE対応が必要な案件では、フォールバック(代替手段)を用意しましょう。

clamp()でフォントサイズを可変にする実践テクニック

基本的なフォントサイズの設定方法

レスポンシブなフォントサイズは、vw(ビューポート幅の%)単位を使って可変値を設定するのがポイントです。

  1. /* 見出しのレスポンシブ設定 */
  2. h1 {
  3.   font-size: clamp(1.75rem, 5vw, 3rem); /* 28px 〜 48px */
  4. }
  6. h2 {
  7.   font-size: clamp(1.5rem, 4vw, 2.25rem); /* 24px 〜 36px */
  8. }
  10. h3 {
  11.   font-size: clamp(1.25rem, 3vw, 1.75rem); /* 20px 〜 28px */
  12. }
  14. /* 本文 */
  15. p {
  16.   font-size: clamp(0.875rem, 2.5vw, 1rem); /* 14px 〜 16px */
  17. }

vw単位の計算方法と設定のコツ

スマホ→PCでフォントサイズが変化する様子(14px → 16px)

「4vw」は「ビューポート幅の4%」という意味です。例えば:

  • 画面幅375px(スマホ)の場合: 375 × 0.04 = 15px
  • 画面幅768px(タブレット)の場合: 768 × 0.04 = 30.72px
  • 画面幅1440px(PC)の場合: 1440 × 0.04 = 57.6px

設定のコツ:

  • 見出しは4〜5vw程度(大きく可変させたい)
  • 本文は2〜3vw程度(控えめに可変)
  • 最小値・最大値で読みやすい範囲に制限する

実案件で使えるフォントサイズ一覧表

要素 clamp()設定例 スマホサイズ PCサイズ
メインタイトル(h1) clamp(1.75rem, 5vw, 3rem) 28px 48px
セクション見出し(h2) clamp(1.5rem, 4vw, 2.25rem) 24px 36px
小見出し(h3) clamp(1.25rem, 3vw, 1.75rem) 20px 28px
本文(p) clamp(0.875rem, 2.5vw, 1rem) 14px 16px
小さいテキスト clamp(0.75rem, 2vw, 0.875rem) 12px 14px

余白(margin・padding)も可変にしてみよう

フォントサイズだけでなく、余白もclamp()で可変にすることで、より洗練されたレスポンシブデザインが実現できます。

セクション間の余白を可変にする

  1. .section {
  2.   margin-bottom: clamp(3rem, 8vw, 6rem); /* スマホ48px → PC 96px */
  3. }

コンテナの左右余白を可変にする

  1. .container {
  2.   padding-left: clamp(1rem, 5vw, 4rem);
  3.   padding-right: clamp(1rem, 5vw, 4rem);
  4. }

要素間の余白も統一的に管理

  1. /* CSS変数で一元管理すると便利 */
  2. :root {
  3.   --space-xs: clamp(0.5rem, 1vw, 1rem);
  4.   --space-sm: clamp(1rem, 2vw, 1.5rem);
  5.   --space-md: clamp(2rem, 4vw, 3rem);
  6.   --space-lg: clamp(3rem, 6vw, 5rem);
  7.   --space-xl: clamp(4rem, 8vw, 7rem);
  8. }
  10. /* 使用例 */
  11. .card {
  12.   padding: var(--space-md);
  13.   margin-bottom: var(--space-sm);
  14. }

CSS変数と組み合わせると、サイト全体の余白を一括で調整できます!

要素の幅(width)をclamp()で制御する

コンテナの幅も可変にすることで、極端な画面サイズでも読みやすいレイアウトが維持できます。

コンテンツ幅の最適化

  1. .content {
  2.   width: clamp(320px, 90vw, 1200px); /* 最小320px、最大1200px */
  3.   margin: 0 auto; /* 中央寄せ */
  4. }

カードレイアウトの幅調整

  1. .card {
  2.   width: clamp(250px, 45vw, 400px);
  3.   padding: clamp(1rem, 3vw, 2rem);
  4. }

実践例:ヒーローセクションの実装

320px → 768px → 1200pxとコンテナが伸縮する3段階図解 
  1. <section class="hero">
  2.   <h1 class="hero__title">レスポンシブデザインを簡単に</h1>
  3.   <p class="hero__text">clamp()関数で実現する次世代のコーディング</p>
  4. </section>
  1. .hero {
  2.   width: clamp(320px, 90vw, 1200px);
  3.   margin: 0 auto;
  4.   padding: clamp(2rem, 5vw, 4rem);
  5.   text-align: center;
  6. }
  8. .hero__title {
  9.   font-size: clamp(2rem, 6vw, 4rem);
  10.   margin-bottom: clamp(1rem, 3vw, 2rem);
  11.   font-weight: bold;
  12.   line-height: 1.2;
  13. }
  15. .hero__text {
  16.   font-size: clamp(0.875rem, 2.5vw, 1.125rem);
  17.   color: #666;
  18. }

メディアクエリとclamp()を組み合わせる実践パターン

clamp()だけですべてカバーできるわけではありません。レイアウト変更が必要な場合はメディアクエリと併用するのがベストプラクティスです。

使い分けの基本方針

用途 使用する手法 理由
フォントサイズ・余白の調整 clamp() 連続的な変化が自然
レイアウトの切り替え(1カラム↔2カラム) メディアクエリ 構造的な変更が必要
要素の表示/非表示 メディアクエリ ON/OFFの切り替えが必要
Flexbox/Gridの方向変更 メディアクエリ レイアウト変更が必要

実践例:カードレイアウトのレスポンシブ対応

  1. /* clamp()で可変にする部分 */
  2. .card {
  3.   padding: clamp(1rem, 3vw, 2rem);
  4.   border-radius: clamp(8px, 2vw, 16px);
  5. }
  7. .card__title {
  8.   font-size: clamp(1.25rem, 3vw, 1.75rem);
  9. }
  11. /* メディアクエリでレイアウトを切り替える */
  12. .card-container {
  13.   display: grid;
  14.   gap: clamp(1rem, 3vw, 2rem);
  15.   grid-template-columns: 1fr; /* スマホ:1カラム */
  16. }
  18. @media (min-width: 768px) {
  19.   .card-container {
  20.     grid-template-columns: repeat(2, 1fr); /* タブレット:2カラム */
  21.   }
  22. }
  24. @media (min-width: 1024px) {
  25.   .card-container {
  26.     grid-template-columns: repeat(3, 1fr); /* PC:3カラム */
  27.   }
  28. }

ポイント: フォントサイズ・余白はclamp()で滑らかに変化させつつ、カラム数はメディアクエリで明確に切り替える。

推奨ブレイクポイント一覧

clamp()の滑らかな曲線 vs メディアクエリの階段状グラフ比較 
  1. /* 実案件でよく使うブレイクポイント */
  3. /* スマホ(デフォルト):~767px */
  4. /* 基本スタイルをここに記述 */
  6. /* タブレット:768px~ */
  7. @media (min-width: 768px) {
  8.   /* 2カラムレイアウトなど */
  9. }
  11. /* PC(小):1024px~ */
  12. @media (min-width: 1024px) {
  13.   /* 3カラムレイアウトなど */
  14. }
  16. /* PC(大):1440px~ */
  17. @media (min-width: 1440px) {
  18.   /* 大画面用の最適化 */
  19. }

よくあるトラブルと解決法

スマホで文字が小さすぎる/大きすぎる

原因: 最小値・最大値の設定が適切でない

対処法:

  1. /* NG例:最小値が小さすぎる */
  2. font-size: clamp(0.5rem, 3vw, 2rem); /* 8pxは読みにくい */
  4. /* OK例:読みやすい範囲に設定 */
  5. font-size: clamp(0.875rem, 3vw, 1.125rem); /* 14px~18pxで読みやすい */

チェックポイント:

  • 本文の最小値は14px(0.875rem)以上を推奨
  • 最大値は18px(1.125rem)程度まで
  • 実機で必ず確認する

PCで文字が大きくなりすぎる

原因: vw値が大きすぎる、または最大値の設定が大きすぎる

対処法:

  1. /* NG例:vwが大きすぎる */
  2. font-size: clamp(1rem, 10vw, 5rem); /* 10vwは大きすぎ */
  4. /* OK例:適切な最大値で制限 */
  5. font-size: clamp(1rem, 3vw, 1.5rem); /* 最大24pxに制限 */

calc()と組み合わせた複雑な計算

clamp()の中でcalc()を使うこともできます:

  1. /* calc()と組み合わせた例 */
  2. font-size: clamp(1rem, calc(0.875rem + 0.5vw), 1.25rem);
  4. /* ベース値 + vwで微調整する例 */
  5. padding: clamp(1rem, calc(1rem + 2vw), 3rem);

IE11対応が必要な場合のフォールバック

IE11ではclamp()が使えないため、代替手段を用意します:

  1. /* IE11用のフォールバック */
  2. h1 {
  3.   font-size: 2rem; /* IE11用の固定値 */
  4.   font-size: clamp(1.5rem, 4vw, 2.5rem); /* モダンブラウザ用 */
  5. }
  7. /* または@supportsで分岐 */
  8. h1 {
  9.   font-size: 2rem;
  10. }
  12. @supports (font-size: clamp(1rem, 1vw, 2rem)) {
  13.   h1 {
  14.     font-size: clamp(1.5rem, 4vw, 2.5rem);
  15.   }
  16. }

実案件で使える完成版サンプルコード

ここまでの内容を組み合わせた、実案件でそのまま使えるレスポンシブページのサンプルを紹介します。

HTML構造

完成したレスポンシブWebサイトのマルチデバイスモックアップ 
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>レスポンシブデザインサンプル</title>
  7.   <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.   <main class="container">
  11.     <section class="hero">
  12.       <h1 class="hero__title">レスポンシブデザインを簡単に</h1>
  13.       <p class="hero__text">clamp()関数で実現する次世代のコーディング</p>
  14.     </section>
  16.     <section class="content">
  17.       <h2>特徴</h2>
  18.       <div class="card-container">
  19.         <div class="card">
  20.           <h3>簡単実装</h3>
  21.           <p>メディアクエリを減らして効率的にコーディング</p>
  22.         </div>
  23.         <div class="card">
  24.           <h3>滑らかな変化</h3>
  25.           <p>画面サイズに応じて自然にサイズが変化</p>
  26.         </div>
  27.         <div class="card">
  28.           <h3>保守性向上</h3>
  29.           <p>コードがシンプルで管理しやすい</p>
  30.         </div>
  31.       </div>
  32.     </section>
  33.   </main>
  34. </body>
  35. </html>

CSS完成版

  1. /* ===== CSS変数で一元管理 ===== */
  2. :root {
  3.   /* フォントサイズ */
  4.   --font-size-base: clamp(0.875rem, 2.5vw, 1rem);
  5.   --font-size-h1: clamp(2rem, 6vw, 4rem);
  6.   --font-size-h2: clamp(1.5rem, 4vw, 2.25rem);
  7.   --font-size-h3: clamp(1.25rem, 3vw, 1.75rem);
  8.   
  9.   /* 余白 */
  10.   --space-sm: clamp(1rem, 2vw, 1.5rem);
  11.   --space-md: clamp(2rem, 4vw, 3rem);
  12.   --space-lg: clamp(3rem, 6vw, 5rem);
  13. }
  15. /* ===== リセット・基本スタイル ===== */
  16. * {
  17.   margin: 0;
  18.   padding: 0;
  19.   box-sizing: border-box;
  20. }
  22. body {
  23.   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  24.   font-size: var(--font-size-base);
  25.   line-height: 1.6;
  26.   color: #333;
  27. }
  29. /* ===== レイアウト ===== */
  30. .container {
  31.   width: clamp(320px, 90vw, 1200px);
  32.   margin: 0 auto;
  33.   padding: var(--space-md);
  34. }
  36. /* ===== ヒーローセクション ===== */
  37. .hero {
  38.   text-align: center;
  39.   padding: var(--space-lg) 0;
  40.   margin-bottom: var(--space-lg);
  41. }
  43. .hero__title {
  44.   font-size: var(--font-size-h1);
  45.   font-weight: bold;
  46.   line-height: 1.2;
  47.   margin-bottom: var(--space-sm);
  48. }
  50. .hero__text {
  51.   font-size: clamp(0.875rem, 2.5vw, 1.125rem);
  52.   color: #666;
  53. }
  55. /* ===== コンテンツセクション ===== */
  56. .content h2 {
  57.   font-size: var(--font-size-h2);
  58.   margin-bottom: var(--space-md);
  59.   font-weight: bold;
  60. }
  62. /* ===== カードレイアウト ===== */
  63. .card-container {
  64.   display: grid;
  65.   gap: var(--space-md);
  66.   grid-template-columns: 1fr;
  67. }
  69. @media (min-width: 768px) {
  70.   .card-container {
  71.     grid-template-columns: repeat(2, 1fr);
  72.   }
  73. }
  75. @media (min-width: 1024px) {
  76.   .card-container {
  77.     grid-template-columns: repeat(3, 1fr);
  78.   }
  79. }
  81. .card {
  82.   background: #f9f9f9;
  83.   padding: clamp(1.5rem, 3vw, 2rem);
  84.   border-radius: clamp(8px, 2vw, 12px);
  85.   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  86.   transition: transform 0.3s ease;
  87. }
  89. .card:hover {
  90.   transform: translateY(-4px);
  91. }
  93. .card h3 {
  94.   font-size: var(--font-size-h3);
  95.   margin-bottom: var(--space-sm);
  96.   font-weight: bold;
  97.   color: #222;
  98. }
  100. .card p {
  101.   color: #666;
  102.   line-height: 1.6;
  103. }

このコードをコピーすれば、すぐにレスポンシブサイトが作れます!

よくある質問

Q1. clamp()関数を使うと、すべてのメディアクエリが不要になりますか?

A1. いいえ、完全には不要になりません。フォントサイズや余白などの連続的な値はclamp()が最適ですが、レイアウトの構造変更(1カラム↔2カラム)や要素の表示/非表示などは、従来通りメディアクエリが必要です。両者を適材適所で使い分けることが大切です。

Q2. vw単位を使うと、横スクロールが発生することがありますが、防ぐ方法はありますか?

A2. html/body要素に overflow-x: hidden; を設定することで防げます。また、clamp()で最大値を適切に設定しておけば、極端に大きくなることを防げます。

  1. html, body {
  2.   overflow-x: hidden;
  3. }

Q3. remとpx、どちらを使うべきですか?

A3. remの使用を推奨します。ユーザーのブラウザ設定でフォントサイズを変更した際に、rem単位なら自動で追従してくれます(アクセシビリティ向上)。pxは固定値なので、ユーザー設定を無視してしまいます。

Q4. clamp()の計算式を自動で作成してくれるツールはありますか?

A4. はい、あります。「Fluid Type Scale Calculator」や「Clamp Calculator」などのオンラインツールで、最小・最大画面幅とフォントサイズを入力すると、自動でclamp()の式を生成してくれます。初心者の方には特におすすめです。

Q5. clamp()を使うとパフォーマンスに影響はありますか?

A5. いいえ、パフォーマンスへの影響はほぼありません。むしろメディアクエリを大量に書くよりも、CSSのサイズが小さくなり、読み込み速度が改善される可能性があります。

まとめ

この記事では、CSSのclamp()関数を使ったレスポンシブデザインの実践方法を解説しました。

重要なポイント:

  • clamp()は「最小値・可変値・最大値」の3つを指定して、画面幅に応じて自動調整
  • フォントサイズ・余白・幅など、連続的に変化させたい値に最適
  • vw単位を使うことで、画面幅に応じた滑らかな変化が実現できる
  • レイアウト変更にはメディアクエリが必要。両者を使い分けることが大切
  • CSS変数と組み合わせると、サイト全体の一括管理が簡単に

次のステップ:

  • 実際の案件で今回のサンプルコードを試してみる
  • CSS GridやFlexboxと組み合わせて、より高度なレイアウトに挑戦
  • min()・max()関数も学習して、さらに柔軟なデザインを実現

clamp()を使いこなせるようになると、コーディング効率が劇的に向上し、保守性の高いレスポンシブサイトが作れるようになります。ぜひ実案件で活用してみてください!

スポンサーリンク
スポンサーリンク