【完全保存版】CSSで文字サイズを変更する方法まとめ｜px・em・remの違いと使い分けを初心者向けに解説

Webサイトを作り始めると、必ず出てくるのが
「文字サイズをどう指定すればいいのか？」 という疑問です。

文字が小さくて読みにくい
スマホだと文字サイズが変に見える
px・em・remの違いが分からない

この記事では、「css 文字サイズ」で検索した初心者の方に向けて、
CSSで文字サイズを変更する基本から、
実務でよく使われる指定方法・考え方までを 分かりやすく解説 します。

CSSで文字サイズを指定する基本（font-size）

CSSで文字サイズを変更するには、font-size プロパティを使います。

p {
  font-size: 16px;
}

これが、文字サイズ指定の最も基本的な書き方です。

よく使われる文字サイズの単位

CSSでは、文字サイズを指定する単位が複数あります。
初心者の方がまず押さえておきたいのは、次の4つです。

それぞれの特徴を順に見ていきましょう。

px（ピクセル）で文字サイズを指定する方法

p {
  font-size: 16px;
}

特徴

直感的で分かりやすい
指定したサイズがそのまま反映される
初心者に最もおすすめ

注意点

ユーザーの環境に応じた拡大・縮小がしにくい

まずは px指定から始める のが安心です。

emで文字サイズを指定する方法

p {
  font-size: 1.2em;
}

特徴

親要素の文字サイズを基準にする
入れ子構造でサイズが変わりやすい

body {
  font-size: 16px;
}

p {
  font-size: 1.2em; /* 約19.2px */
}

注意点

入れ子が深くなると計算が難しい

remで文字サイズを指定する方法

p {
  font-size: 1rem;
}

特徴

html（ルート要素）の文字サイズを基準にする
入れ子の影響を受けない
レスポンシブ対応に強い

html {
  font-size: 16px;
}

現在のWeb制作では、
rem指定が最もおすすめ されるケースが増えています。

%（パーセント）で指定する方法

p {
  font-size: 100%;
}

特徴

親要素を基準に割合で指定
emと似た挙動

初心者のうちは、
px・remを優先して使う方が分かりやすいです。

初心者におすすめの文字サイズ指定ルール

迷ったら、次のルールを使ってください。

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

見出しは、remで調整します。

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

スマホでも読みやすい文字サイズの目安

一般的な目安は次の通りです。

本文：16px（1rem）
見出し：20〜32px
注釈：14px以上

小さすぎる文字はユーザー離脱の原因になります。

文字サイズが変わらないときの原因

font-sizeが上書きされている

p {
  font-size: 16px;
}

他のCSSで上書きされている可能性があります。

body p {
  font-size: 14px;
}

CSSが正しく読み込まれていない

<link rel="stylesheet" href="style.css">

ファイルパスや読み込み順も確認しましょう。

レスポンシブ対応で文字サイズを変える方法

画面サイズに応じて文字サイズを変更する場合は、
メディアクエリを使います。

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

よくある質問

pxとremはどちらを使うべきですか

初心者の方は、
px → 慣れてきたら rem の順で覚えるのがおすすめです。

文字サイズを大きくしすぎるとSEOに影響しますか

直接の影響はありませんが、
読みやすさはユーザー評価に影響します。

まとめ

CSSで文字サイズを変更するには、
font-size と単位の違いを理解することが重要です。

基本は font-size
px は分かりやすく初心者向け
rem は実務・レスポンシブ向き
小さすぎる文字は避ける

「css 文字サイズ」で検索した方は、
まず pxまたはremでの指定方法 をしっかり身につけてください。
文字サイズを適切に調整できるだけで、Webサイトの読みやすさは大きく向上します。

【完全保存版】CSSで文字サイズを変更する方法まとめ｜px・em・remの違いと使い分けを初心者向けに解説