カテゴリー
お問い合わせ

【CSS】メディアクエリは不要！？clamp()関数でフォントサイズを滑らかに可変させる方法

HTML/CSS
目次

レスポンシブサイトのコーディングで、スマホ・タブレット・PCとデバイスごとにフォントサイズを @media（メディアクエリ）で上書き指定していくのは、記述量も増えて大変ですよね。

CSS関数である clamp() を使えば、メディアクエリを一切書かずに、たった1行で「画面幅に合わせた滑らかな文字サイズの可変」が実現できます！

今回は、コーディング効率を劇的に上げる clamp() 関数の基本的な使い方と、その仕組みをわかりやすく解説します。画面幅を伸び縮みさせて、デモの動作を確認してみてください！

デモ動作

See the Pen clamp()でメディアクエリ不要の可変フォントサイズ by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>clamp() 関数 デモ</h2>
  <p class="p-desc">ブラウザの画面幅（ウィンドウサイズ）を広げたり縮めたりしてみてください！</p>
  
  <div class="p-demo-box">
    <!-- 従来のメディアクエリを使ったテキスト -->
    <div class="p-text-block">
      <span class="c-badge c-badge--old">従来の方法</span>
      <p class="c-text-media">
        メディアクエリで指定したテキストです。<br>
        特定の画面幅でカクッとサイズが変わります。
      </p>
    </div>

    <hr class="c-line">

    <!-- clamp()を使ったテキスト -->
    <div class="p-text-block">
      <span class="c-badge c-badge--new">clamp()を使用</span>
      <p class="c-text-clamp">
        clamp()で指定したテキストです！<br>
        画面幅に合わせて滑らかに伸縮し、<br>
        最小16px〜最大32pxの間で自動調整されます。
      </p>
    </div>
  </div>
</div>

【CSS】

.l-wrap { 
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #3e3e3e;
  text-align: center;
}
h2 { 
  font-size: 16px;
  color: #1bb4d4;
  margin-bottom: 16px;
}
.p-desc { 
  font-size: 16px;
  font-weight: bold;
  color: #666;
  margin-bottom: 40px;
}

.p-demo-box {
  background-color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.p-text-block { 
  margin: 30px 0;
}
.c-line { 
  border-top: 1px dashed #ccc;
  margin: 40px 0;
}

/* バッジの装飾 */
.c-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 16px;
}
.c-badge--old { 
  background-color: #999;
}
.c-badge--new { 
  background-color: #e83e8c;
}


/* =========================================
   従来の方法（メディアクエリを使用）
========================================= */
.c-text-media {
  font-weight: bold;
  line-height: 1.6;
  font-size: 16px; /* スマホサイズ */
}
@media (width >= 768px) {
  .c-text-media {
    font-size: 24px; /* タブレットサイズ */
  }
}
@media (width >= 1024px) {
  .c-text-media {
    font-size: 32px; /* PCサイズ */
  }
}

/* =========================================
   clamp() を使った方法
========================================= */
.c-text-clamp {
  font-weight: bold;
  line-height: 1.6;
  color: #e83e8c;
  
  /* 💡たった1行！ メディアクエリ不要！ */
  font-size: clamp(16px, 3vw, 32px);
}

コードの解説・仕組み

clamp() 関数の書き方と仕組み

/* =========================================
   clamp() を使った方法
========================================= */
.c-text-clamp {
  ...
  
  /* 💡たった1行！ メディアクエリ不要！ */
  font-size: clamp(16px, 3vw, 32px);
}

clamp() は、カンマ区切りで 「最小値, 推奨値, 最大値」 の3つの値を設定します。

今回の font-size: clamp(16px, 3vw, 32px); を日本語で文章にすると、以下のようになります。

  • 最小値（16px）
    画面がどんなに狭くなっても、文字サイズは16pxより小さくならない。
  • 推奨値（3vw）
    基本はこのサイズ！画面幅の3%の大きさで、画面の伸縮に合わせて滑らかに変化する。
  • 最大値（32px）
    画面がどんなに広くなっても、文字サイズは32pxより大きくならない。

clamp() を使用するメリット

従来のように @media を使って「768px以上なら〜」と書く必要がなくなり、コードの量が圧倒的に減ります。また、画面幅に応じて文字がシームレスに変化するため、タブレットなどの「中間の画面サイズ」でも常に最適な文字サイズを保てるのが最大の強みです！

font-size だけでなく、width や padding など、サイズを指定するプロパティなら何にでも使える非常に便利な関数です。

補足：真ん中の「推奨値（vw）」ってどうやって決めるの？

clamp() の真ん中に入れる推奨値（vw）は、適当な数値ではなく「基準としたい画面幅」と「その時に見せたい目標のフォントサイズ」から逆算して正確に求めるのが基本です。

以下のシンプルな計算式で、簡単に導き出すことができます！

計算式： ( 目標のピクセル数 ÷ 基準の画面幅 ) × 100 = vw値

例えば、「タブレットサイズ（画面幅768px）の時に、フォントサイズをピッタリ24pxにしたい」という場合の計算は以下のようになります。

計算式： 24 ÷ 768 × 100 = 3.125

つまり、3.125vw を推奨値として設定すれば、画面幅768pxの時に正確に24pxになる、という仕組みです！

【時短テクニック】
毎回電卓などで計算するのは大変なので、「CSS clamp generator」などの無料ツールを使って、最小・最大の画面幅とフォントサイズを入力し、自動計算されたコードをコピペするのが主流です。便利なジェネレーターがたくさんあるので、ぜひ活用してコーディングを効率化しましょう！

補足：ブラウザ対応状況

より詳しい仕様や最新の対応状況については、以下の公式ドキュメントをご参照ください。

MDN: clamp()

まとめ

今回は、CSSの clamp() 関数を使って、メディアクエリなしでフォントサイズを可変させるテクニックをご紹介しました。

近年のWeb制作では、デバイスの画面サイズが多様化しているため、細かいブレイクポイントを設定するよりも、こういった関数を使って「どんな画面幅でも綺麗に見える流動的なレイアウト」を作ることが主流になっています。

記述もシンプルで保守性もグッと上がるので、ぜひご自身のコーディングに取り入れてみてください！

Prev
Next

関連記事