【入門編】メディアクエリとclamp関数による流体タイポグラフィ – HTML実践ガイド

「画面サイズが変わるたびに調整…もう疲れた！」を解決する、魔法の「clamp関数」入門

Webサイトを作っていて、こんな経験はありませんか？

「PCで見ると文字がちょうどいいのに、スマホで見ると文字がデカすぎてレイアウトが崩れる…」
「かといってスマホに合わせると、PCでは文字が豆粒みたいになって読みづらい…」

そのたびにメディアクエリ（`@media`）を書いて、何度も細かい調整をする。これ、本当に骨が折れますよね。正直、僕も駆け出しの頃はここで何度も投げ出しそうになりました。

でも大丈夫。現代のCSSには、そんな苦悩を魔法のように解決してくれる「clamp（クランプ）関数」という強い味方がいます。今日は、インライン要素を例に、誰でも明日から使える「流体タイポグラフィ」のコツを、専門用語少なめで解説していきますね。

—

そもそも「流体タイポグラフィ」って何？

「流体」と聞くと難しく感じるかもしれませんが、要は「水のように形を変える文字」のことです。

これまでのWeb制作では、画面の幅ごとにカチッとサイズを決めていました。

画面幅 375px のとき：16px
画面幅 768px のとき：20px
画面幅 1024px のとき：24px

これだと、画面幅が 767px から 768px に変わった瞬間、文字が「ガクッ」と跳ねるように大きくなりますよね。これがユーザーには少し不自然に映るんです。

流体タイポグラフィなら、「スマホサイズのときはこの大きさ、PCならこの大きさ。その間は画面幅に合わせてスムーズに大きさを変えてね」とブラウザにお願いできます。まるで、ゴム紐のように伸縮自在な文字を作れるんです。

—

clamp関数という「魔法の箱」

`clamp()` は、3つの数値を渡すだけで、文字のサイズを自動調整してくれる関数です。イメージとしては「最小・理想・最大」という3つの枠を決める箱だと思ってください。

/ 基本の形 /
font-size: clamp(最小サイズ, 理想のサイズ, 最大サイズ);

最小サイズ（下限）: 「これ以上は小さくしないでね」という限界値。
理想のサイズ（可変）: 「画面幅に合わせて、これくらいの比率で動いてね」というメインの数値。
最大サイズ（上限）: 「これ以上大きくしなくていいよ」という打ち止め値。

実際に書いてみよう！

例えば、`strong`タグ（強調テキスト）でやってみますね。

strong {
/ 最小 16px、理想は画面幅(vw)の 4%、最大 24px /
font-size: clamp(1rem, 4vw, 1.5rem);
}

このコードのポイントは `4vw` です。`vw` は「Viewport Width」の略で、画面幅に対するパーセンテージ。画面が広がれば広がるほど、文字も「4%分だけ」大きく育ってくれます。そして `1rem`（16px）以下にはならず、`1.5rem`（24px）以上にもならない。これだけで、レスポンシブ対応が完了です！

—

インライン要素（a, span, codeなど）で使ってみる

インライン要素は文章の一部として溶け込むものなので、唐突にサイズが変わると読みにくいものです。`clamp` を使えば、自然なリズムで文字サイズが追従します。

このWebサイトの clamp() 関数は、
こちらからダウンロードできます。

/ インライン要素も個別に調整が可能 /
code {
/ 固定値になりがちなコードも、少しだけ流動的に /
font-size: clamp(0.875rem, 2vw, 1rem);
background: #f4f4f4;
padding: 2px 4px;
}

a {
/ リンクテキストも画面に応じて優しくサイズ変化 /
font-size: clamp(1rem, 3vw, 1.25rem);
color: #007bff;
}

—

「つまずきやすいポイント」をフォロー

ここまで読んで「なんだか便利そうだけど、計算が難しそう…」と不安になったあなた。安心してください。

最初は「最小と最大だけ決めて、真ん中は適当な vw を入れてみる」くらいの感覚で全く問題ありません。ブラウザでプレビューしながら、数値を少しずつ変えて「お、いい感じの伸び縮みだな」と思えるポイントを探す。この「泥臭い試行錯誤」こそが、一流のエンジニアへの第一歩です。

覚えておいてほしいこと

アクセシビリティを忘れずに: どんなに滑らかに変化しても、最小サイズが小さすぎると高齢の方や目の不自由な方が読めなくなってしまいます。最小値は `1rem`（16px相当）を下回らないように設定するのが、Web制作の優しさです。
引き算の美学: 画面のあちこちで `clamp` を使いすぎると、レイアウトが落ち着かなくなることもあります。見出しや強調したいインライン要素など、ここぞという場所に使ってみてください。

—

最後に：完璧を目指さなくて大丈夫

Web開発の世界は日進月歩で、新しい技術を学ぶたびに「もっと早く知りたかった！」と思うものです。でも、今日あなたが学んだ `clamp()` は、今のWeb制作現場で間違いなく「必須スキル」と言えるほどスマートな手法です。

完璧なレスポンシブを目指して何百行ものメディアクエリを書く必要はありません。CSSに少しだけ任せて、あなたはもっと「どんなコンテンツを届けたいか」という、人間味のある部分に時間をかけてみてくださいね。

また何か小さな悩みでもあれば、いつでも聞きに来てください。一緒に少しずつ、心地よいWebサイトを作っていきましょう！