LESSON 02

CSSで文字サイズを変更する

文字が小さすぎると読みづらく、大きすぎると情報量が減ります。まず本文の基準サイズを調整し、そのあと見出しやボタンを必要に応じて変更します。

1. まず基本文字サイズを変更する

template001-simple-business/css/style.css
初心者向け編集エリアstyle.css
:root {
  /* ★基本文字サイズ */
  --base-font-size: 16px;
}

本文全体を少し大きくしたいなら、16px を 17px にして比較してみます。

2. 本文は16〜18pxを目安に

BEFORE16px

一般的で情報量とのバランスが取りやすいサイズ。

AFTER17px

少しゆったりして読みやすさを重視したサイズ。

変更例style.css
--base-font-size: 17px;
大きくしすぎない： PCで20px以上にすると、文章量が多いサイトでは間延びして見えることがあります。

3. 大見出しは個別に調整する

トップページのセクション見出しは .section-title に指定されています。

見出しサイズstyle.css
.section-title {
  font-size: clamp(32px, 4.2vw, 54px);
}

小さめにしたければ、例えば clamp(28px, 3.8vw, 46px) のように最大値を下げます。

4. ボタン文字だけ変更する

ボタンの文字サイズstyle.css
.button {
  font-size: 14px;
  font-weight: 800;
}

ボタン文字を少し大きくしたい場合は 15px にします。ボタン自体の高さも一緒に確認してください。

5. clamp() は画面サイズに合わせる指定

clamp(32px, 4.2vw, 54px) は「最小32px、画面幅に応じて変化、最大54px」という意味です。

32pxこれより小さくしない
4.2vw画面幅に応じて伸縮
54pxこれより大きくしない
スマホとPCで別々に細かく指定しなくても、自然にサイズが変わるのでレスポンシブデザインに便利です。

6. 文字サイズ変更後のチェック

  • 本文が1行に長くなりすぎていない
  • 見出しが2〜3行に割れすぎていない
  • ボタン文字がはみ出していない
  • スマホで会社名やメニューが崩れていない
  • 文字の大小で情報の優先順位が伝わる
NEXT LESSON

次は余白です。

余白は「何もない場所」ではなく、デザインを整える重要な要素です。

LESSON 3へ →