【CSS入門】文字のサイズを変更する方法｜font-sizeの使い方とおすすめ単位を解説

372

Views

CSSでフォントサイズを調整する方法

Webページの文章が「小さくて読みづらい」「大きすぎてバランスが悪い」などと感じたことはありませんか？
そんなときに使えるのが、CSSによるフォントサイズ（font-size）の調整です。

この記事では、文字サイズの基本的な指定方法から、レスポンシブ対応やおすすめの単位まで、初心者にも分かりやすく解説していきます。

フォントサイズは「font-size」で設定する

CSSで文字の大きさを指定するには、font-sizeプロパティを使用します。基本の書き方は次のとおりです：

p {
  font-size: 16px;
}

このコードは、段落の文字サイズを16ピクセルに設定します。

代表的な単位と使い方

フォントサイズはさまざまな単位で指定できます。それぞれの特徴を理解して使い分けましょう。

  • px（ピクセル）：固定サイズ。見た目が安定するが、拡大縮小に弱い。
  • em：親要素のサイズを基準にする。柔軟だが扱いに慣れが必要。
  • rem：ルート要素（html）のサイズを基準にする。レスポンシブ対応におすすめ。
  • %：親要素に対する割合指定。emと似た使い方。
h1 {
  font-size: 2rem;
}
.small-text {
  font-size: 80%;
}

rem単位を使うと、全体のバランスが取りやすくなります。

見出しと本文のバランスを意識しよう

文字サイズは、階層構造に応じて調整することが大切です。

  • h1：2.0rem（タイトル）
  • h2：1.6rem（セクション見出し）
  • p：1.0rem（本文）
  • .note：0.875rem（注釈など）

サイズを揃えることで、読みやすく整ったページに仕上がります。

画面サイズに合わせてサイズを変える

レスポンシブデザインを考えると、スマホとPCでフォントサイズを切り替えることも有効です。

body {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

こうすることで、スマートフォンでも見やすい文字サイズに調整できます。

初期設定（root）のサイズを意識する

rem単位を使う場合、htmlタグでベースのサイズを定義しておくと便利です。

html {
  font-size: 16px;
}

これにより、1rem = 16pxとして、計算しやすくなります。

まとめ

CSSのfont-sizeプロパティを使えば、文字の見やすさや読みやすさを自由に調整できます。
単位の特徴を理解して使い分けることで、見た目も美しく、レスポンシブ対応にも強いWebデザインが可能になります。

Webサイトの文字サイズを一度見直して、より快適な読みやすさを目指してみましょう！

関連記事