すべてのカテゴリ

Webサイト制作では、画面サイズに応じて文字サイズを調整する「レスポンシブフォントサイズ」が重要です。スマートフォン・タブレット・PCなど、さまざまな画面幅でも読みやすさを保つためです。以前はメディアクエリを使って画面幅ごとにフォントサイズを変更する方法が主流でした。しかし現在は、CSSの clamp() 関数を使う方法が主流になっています。昔の方法：メディアクエリで切り替える以前は画面サイズごとにフォントサイズを指定する方法が一般的でした。今主流の方法：clamp()現在多くのサイトで使われているのが clamp() を使ったフォントサイズ指定です。font-size: clamp(18px, 2vw, 28px);clampは次の3つで構成されています。最小サイズ可変サイズ最大サイズつまりこの指定は最小：18px画面幅に応じて拡大（2vw）最大：28pxという意味になります。画面が小さいと18px、画面が広くなると徐々に大きくなり、最大で28pxまでしか大きくなりません。このようにメディアクエリを書かなくても自動でサイズが調整されます。デザイン基準から計算する書き方実務では、デザインカンプの幅を基準に計算する書き方もよく使われます。例えばデザイン幅：1440pxフォントサイズ：28pxの場合は次のように書きます。font-size: clamp(18px, calc(28 / 1440 * 100vw), 28px);これは1440pxの画面で28pxになるそれより小さい画面では比例して縮む最小は18pxという指定になります。なぜclampが主流になったのか理由はシンプルで

WebサイトのCSSでフォントサイズを指定する方法はいくつかありますが、その中でもよく使われるのが rem と %（パーセント） です。どちらも「相対単位」ですが、基準が違うため仕組みを理解しておかないと意図しないサイズになることがあります。この記事では remと%の関係 を整理して解説します。まず結論：基準が違うremと%の一番大きな違いは、どこを基準にサイズを計算するかです。remHTML要素（html）のフォントサイズを基準に計算される。%親要素のフォントサイズを基準に計算される。つまり、rem = ページ全体の基準サイズ% = 親要素からの相対サイズという考え方になります。remの仕組みremは「root em」の略で、root（html）のフォントサイズを基準に計算されます。例えば、ブラウザの標準設定ではhtmlのフォントサイズ16pxになっていることが多いです。この場合1rem = 16px2rem = 32px0.5rem = 8pxという計算になります。remは 親要素の影響を受けない ため、サイト全体でサイズ管理しやすいのが特徴です。%の仕組み%は 親要素のフォントサイズを基準に計算 されます。例えば親要素font-size: 20px子要素font-size: 50%この場合50% × 20px = 10pxになります。さらに入れ子構造になると、計算がどんどん重なります。親20px子50% → 10px孫200% → 20pxこのように 階層ごとにサイズが変わる のが%の特徴です。remと%の関係実は多くのサイトでは、次のような使い方をします。htmlで%指