WordPress制作者のためのCSS文字サイズ設計：px, em, remの使い分けとレスポンシブ対応

2025年6月4日 2025年6月4日

りんごべりー

はじめに

WordPressでサイト制作をしていると、「とりあえず16pxにしておけばOKかな」と、なんとなく文字サイズを決めていませんか？でも実は、CSSの単位をうまく使い分けることで、デザインの一貫性やレスポンシブ対応がグッとやりやすくなります。

この記事では、CSSの文字サイズに使われる単位（px, em, rem, %, vw）の特徴と、WordPress制作における実践的な使い分け方、そしてスマホにも優しいレスポンシブ対応の考え方をご紹介します。

💡 vw（viewport width）は、1vw = ビューポートの幅の1%を意味します。例えば、5vwなら、画面幅が1000pxのときは50pxになります。

1. ベースとなるサイズを設定

html {
   font-size: 62.5%; /* = 10px相当（16px × 0.625） */
}

こうしておくと、1rem = 10pxとして扱えるので、計算がしやすくなります。

2. 各要素にremで指定

body {
    font-size: 1.6rem; /* = 16px */
  }

h1 {
    font-size: 3.2rem; /* = 32px */
 }

p {
    font-size: 1.6rem;
   }

3. emで調整したいとき

特定のパーツ（ボタンやモーダル内など）で相対サイズにしたいときに便利。

.button {
   font-size: 1em;  /* 親要素に対して同じサイズ */
   padding: 0.8em 1.2em;
  }

方法①メディアクエリでhtmlのfont-sizeを変更

@media (max-width: 768px) {
      html {
      font-size: 56.25%; /* = 9px相当 */
     }
}

方法② clamp()で自動調整

h1 {
   font-size: clamp(2rem, 5vw, 3.2rem);
  }

clamp()関数は、CSSのプロパティ値に「最小値」「理想値」「最大値」の3つを指定し、その範囲内で自動的に値を調整してくれる便利な関数です。

この記述では、「h1の文字サイズは、画面サイズに応じて変化するけれど、2remより小さくならず、3.2remより大きくならない」という意味になります。

clamp()は「最小、理想、最大」の3つのサイズを設定できる関数ですが、真ん中の値（この例では 5vw）は“基本的にこのくらいがいいな”という柔軟なサイズです。
ただし、それが小さすぎたり大きすぎたりしないように、最低サイズと最大サイズを制限しているのです。

clamp()はとくに大見出し（h1〜h3）やヒーローエリアなど、サイズ可変でバランスをとりたい場面で活躍します。

vw単体でも文字サイズに使えますが、極端に小さい画面では読みにくくなることもあるため、clamp()と組み合わせて使用するのが実践的です。

vwは「viewport width（画面の横幅）」を基準にした単位です。

例えば、横幅が1000pxの画面では 5vw = 50px
スマホなど横幅が狭い画面では自然とサイズも小さくなります。

このvwを使うことで、デバイスに合わせて文字サイズが柔軟に変化する設計ができます。

単位を上手に使い分けて、見た目も読みやすさもスマートなサイトを作っていきましょう！