「PC・タブレット・スマホでいい感じに文字サイズを可変させたい」
「メディアクエリを使うと指定が細かくて面倒だし、急に変化して違和感がある」
そんなときにおすすめなのが「clamp()」というCSS関数です。
TCDユーザーさまの場合、カスタムCSSで調整される方も多いですが、clamp()を使えばなめらかに可変させられます。PC・スマホ用のサイズを指定するためにメディアクエリを何行も書く必要はありません。
当記事では、clamp()の基本的な使い方からメディアクエリとの使い分けまでご紹介します。
clamp()の基本的な使い方
clamp()は、最小値・推奨値・最大値の3つを指定して、値をその範囲内に収めてくれるCSS関数です。指定した範囲内で文字サイズをなめらかに変化させたいときなどに使います。
clamp()の基本構文
clamp()は、以下のように3つの引数をカンマ区切りで指定します。
/* clamp(最小値, 推奨値, 最大値) */
h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}見出しの文字サイズを「4vw」を基準に可変させつつ、次のとおりに指定している状態です。
- 画面が狭い時は「1.5rem」より小さくしない
- 画面が広い時は「2.5rem」より大きくしない
推奨値には「vw」のようなビューポート相対単位を使うのがポイントです。ここに固定値（px・remなど）を入れてしまうと可変しなくなってしまうので注意してください。
初心者によくある失敗例
clamp()を使う際、以下のようなミスが起こりがちです。
- 推奨値に固定値を入れてしまい、結局可変にならない
- 最小値と最大値の差が小さすぎて、clamp()を使う意味がなくなっている
特に2つ目は見落としがちです。「最小値18px・最大値20px」のように差が小さいと、わざわざclamp()を使わなくてもほぼ固定値と変わらない見た目になってしまいます。可変させる意味のある範囲を意識して値を設定しましょう。
メディアクエリとどう使い分ける？
clamp()はメディアクエリの代わりになる場面もありますが、すべてを置き換えられるわけではありません。それぞれ向いている場面についてご紹介します。
メディアクエリが向いているケース
レイアウトそのものが崩れる or 大きく構造を変えたい場合は、メディアクエリの方が適しています。
たとえば、以下のようなケースです。
- スマホでは2カラムを1カラムに変更する
- 特定の画面幅でナビゲーションの表示・非表示を切り替える
このような「ある画面幅を境に構造がガラッと変わる」指定は、clamp()では対応できません。
clamp()が向いているケース
一方で、文字サイズや余白のように、画面幅に応じてなめらかに変化させたい場合は、clamp()が最適です。
.container {
padding-inline: clamp(16px, 5vw, 64px);
}このように書いておけば、ブレイクポイントごとにpaddingを指定し直す必要がなくなります。
実務では要所ごとに併用しよう
「clamp()かメディアクエリか」を二者択一で考える必要はありません。実務では、次のように役割分担するといいです。
- レイアウトの大きな変更 → メディアクエリ
- 文字サイズ・余白などの微調整 → clamp()
全体の構造はメディアクエリで組み立てつつ、細かい数値部分をclamp()に任せることで、コード量を減らしながら滑らかなレスポンシブ対応が実現できるわけです。
テーマのカスタムCSSでちょっとした調整をする時にも役立つ関数なので、見出しサイズや余白を細かく詰めたくなった際は、ぜひ試してみてください。
あわせて読みたいおすすめ記事
Webサイト（ホームページ）の見え方は、どのデバイス（PC・タブレット・スマホ）で見るかによって異なります。レスポンシブデザインのサイトであれば、デバイスに合わせて表示が最適化されるからです。 そのため、Webサイト制作時にはできるだけ多くのデバイスで見え方を確認する必要があります。 で...
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
WordPressテーマ集
コメント