Yugien - 遊戯苑
テーマ

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

A function that keeps values in a “just right” range—set a minimum, a preferred, and a maximum—so things like font size or width scale smoothly without going too small or too big.

clamp()

clamp() は「行き過ぎ防止つきの自動調整」

clamp() は、

の3つを並べて、理想を目指しつつも「行き過ぎない」値にしてくれる関数です。

よくある書き方（文字サイズの“なめらか”調整）

CSS

/* 画面が小さい時は小さすぎず、大きい時は大きすぎない */
html {
    font-size: clamp(14px, 2.5vw, 20px);
}

“理想値”にコツを足す（より自然な伸び縮み）

CSS

/* rem を土台に、画面幅 2vw 分だけ上乗せするイメージ */
h1 {
    font-size: clamp(1.25rem, calc(1rem + 2vw), 2rem);
}

レイアウトにも使える（横幅の例）

CSS

.card {
    width: clamp(280px, 50vw, 640px);
    margin-inline: auto;
}

注意

追加サンプル（用途別の最短メモ）

CSS

/* ヒーロー見出し：スマホで大きすぎず、PCで小さすぎない */
.hero-title {
    font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}

/* 余白：狭小画面で詰めすぎない／広画面で広がりすぎない */
.section {
    padding-block: clamp(16px, 3vh, 64px);
}

/* カードの列幅：小さすぎないカード、広すぎない列 */
.grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 30vw, 320px), 1fr));
}

min()/max() との関係

min(a, b)
より小さい方。
max(a, b)
より大きい方。
clamp(min, ideal, max)
ideal を目指しつつ 最小〜最大におさめる。

→ “動かす＋はみ出し防止” を1行で書けるのが clamp()。

よくあるつまずき（早見表）

最小 > 最大
プロパティが無効に。数値を入れ替える。
単位の不一致
そのプロパティが許す型に揃える（長さ/数値/％など）。
理想値が固定
16px など固定だと“伸び縮み”しない。2vw や calc() を使う。
縮みすぎ/伸びすぎ
最小・最大の見直し。実機で2〜3サイズ確認。
本文まで巨大に
html{font-size:...} は全体に影響。h1等ピンポイント指定も検討。

FAQ

Q. min() / max() と何が違う？
A. min/max は“どちらか一方を選ぶ”関数、clamp() は“理想を目指しつつ範囲に収める”関数です。
Q. 単位は混ぜてOK？
A. そのプロパティが受け入れる型の範囲でOK（例：1rem と 2vw）。ただし意味の合わない型混在は避けます。
Q. 最小が最大より大きいと？
A. 無効になり、そのプロパティ全体が効かなくなります。
Q. メディアクエリはもう不要？
A. 目的次第。clamp() で多くの“いい感じ調整”はできますが、断点でガラッと変えるデザインには @media も使います。
Q. ベンダープレフィックスは必要？
A. 不要です。主要ブラウザで広く使えます。

よくあるエラー早見表

clamp(24px, 10px, 16px)
最小 > 最大。順番を直す。
font-size: clamp(1rem, 50%, 2rem)
型の適合を確認（font-size の % は親要素基準で想定外の伸縮になることも）。
ideal を固定値（例：16px）
伸び縮みしない。2vw や calc() を使う。
期待より小さい/大きい
最小/最大の再設計。実デバイス幅を具体的に想定（360px／768px／1280px）。
全体が大きくなりすぎ
html 直指定をやめ、対象の見出し等に限定。