学びブログ

Learning Blog

スマートフォンでは小さめ、広い画面では大きめ。見出しの文字サイズを画面幅に応じて変えたいとき、CSSのclamp()が使えます。ただし、一行で指定できることと、すべての画面で読みやすいことは別です。

この記事では、一つの見出しを例に、値の考え方と確認の手順を紹介します。コード中の数値は学習用です。実際の書体、文章量、表示環境に合わせて調整してください。

1. 三つの値の役割を読む

clamp()は、可変の値を下限と上限の範囲に収めるCSS関数です。順序は、最小値・可変値・最大値。中央の式が下限より小さければ下限、上限より大きければ上限が使われます。参考：MDN clamp()

.page-title {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
  line-height: 1.5;
}

この例では、画面幅に関わるvwとremを組み合わせています。最小値と最大値を決めているので、画面を広げるだけで際限なく大きくなる指定にはなりません。

2. 数値を一度計算してみる

仮に1remが16pxの環境なら、最小値は24px、最大値は48pxです。中央の式は「16px＋画面幅の2%」として計算できます。下表はその条件に限定した計算例で、すべての利用者の設定を表すものではありません。

値を読めると、「途中の幅で想定より小さい」「もう上限に達している」といった状態を判断しやすくなります。デザインの両端を眺めるだけでなく、中央の式がどの幅で働くかも確認しましょう。

3. 長い見出しで比較する

短い仮文だけでサイズを決めると、本番の長い見出しを入れたときに行数が増え、写真やボタンを押し下げることがあります。まず想定する最長の文章を置き、狭い幅・中間の幅・広い幅で比較します。

たとえば「サービス紹介」と「公開後の運用まで相談できるWebサイト制作」を同じ部品へ入れてみます。大きさだけでなく、行間、周囲の余白、次の説明文との距離も見ます。行数を固定することより、内容が欠けずに読めることを優先しましょう。

4. 拡大表示と文字設定を確認する

可変値を使っただけでは、拡大時の読みやすさは保証されません。ブラウザのズームや文字設定を変え、見出しが必要に応じて大きくなるか、固定高さの領域から切れないかを実際に確かめます。

200%などの拡大表示は確認条件の一つにできます。横幅が狭くなった状態で、画像や操作部品と重ならないかも見てください。特定の数値や単位を選ぶだけで、アクセシビリティ確認が完了するわけではありません。

5. clamp()に任せる範囲を決める

文字サイズをなめらかに変えても、レイアウトの列数や写真の配置まで自動で適切になるわけではありません。構成を切り替える必要がある場所では、メディアクエリなどの設計を別に考えます。

• 最小値で、狭い画面でも読めるか。
• 最大値で、周囲の情報と釣り合うか。
• 途中の幅で、不自然な行数にならないか。
• 長い文章と拡大表示でも欠けないか。

練習では、一つの見出しで中央の式だけを変えた二案を作りましょう。最小・最大は同じにし、幅を少しずつ変えて比べると、変化の速さと文章の折り返しの関係を理解しやすくなります。