CSSで文字サイズを変更する方法｜スマホでも見やすくする基本設定

ホームページを作っていると、

こうした悩みはとても多いです。

そこでこの記事では、初心者でもすぐできる
文字サイズの変更方法と、スマホで見やすくする基本設定を解説します。

CSSで文字サイズを少し調整するだけで、読みやすさは大きく変わるので、
ぜひ最後までご覧くださいね。

CSSで文字サイズが小さくなるよくある原因

まずは、なぜ文字が小さくなるのかという原因から見てみましょう。

文字サイズを指定していない

CSSで指定がないと、ブラウザの初期設定のまま表示されます。

ブラウザ任せになっている

環境によって、文字の大きさが変わることがあります。

スマホ用の設定をしていない

パソコン基準のままだと、スマホでは小さく感じます。

これが、CSSで文字サイズが小さくなるよくある原因です。

CSSで文字サイズを変更する一番簡単な方法

次に、CSSで文字サイズを変更する一番簡単な方法をご紹介します。

まず、文字サイズは font-size で指定します。

p {
  font-size: 16px;
}

これで、p タグの文字サイズが16pxになります。

font-sizeとは？

文字の大きさを指定するCSSです。

数値を大きくすると、文字も大きくなります。

おすすめの文字サイズはどれくらい？

あくまで目安ですが、初心者の方はこのくらいの文字サイズが良いです。

• パソコン：15px〜16px
• スマホ：16pxくらい

小さすぎると読みにくくなるので、少し大きめが無難ですよ。

スマホでも見やすくする基本設定

ここでは、スマホでも見やすくする基本設定をご紹介します。

全体の文字サイズは、body でまとめて指定するのが一番簡単です。

body {
  font-size: 16px;
}

これだけで、ページ全体の文字がそろいます。

スマホだけ文字サイズを大きくする方法

スマホだけ文字サイズを大きくする方法をご紹介します。

スマホ用に文字を少し大きくしたい場合は、こちらを使います。

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

これは何をしている？

• 画面が768px以下
• つまりスマホサイズのときだけ
• 文字サイズを指定

という意味です。

px・em・remの違い（初心者向け）

px・em・remの違いについてご紹介します。

文字サイズには、いくつか指定方法があります。

px（ピクセル）

font-size: 16px;

一番わかりやすく、初心者におすすめです。

em

親の文字サイズを基準に変わります。

慣れないうちは少し分かりにくいです。

rem

全体の文字サイズを基準にします。

あとで調整したい場合に便利です。

👉 最初はpxだけでOK です！

よくある失敗と直し方

よくある失敗と直し方をご紹介します。

文字が小さすぎる

👉 font-sizeを16px前後にする

ページごとに文字サイズがバラバラ

👉 bodyでまとめて指定する

一部だけ極端に大きい

👉 個別指定しすぎていないか確認する

初心者向けおすすめ文字サイズ設定まとめ（コピペ用）

最後に、初心者向けのおすすめな文字サイズ設定方法をご紹介します。

全体用（基本）

body {
  font-size: 16px;
}

見出し用

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

スマホ用

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

まとめ

「CSSで文字サイズを変更する方法｜スマホでも見やすくする基本設定」の内容はいかがでしたでしょうか？

CSSで文字サイズを変えるのは、とてもシンプルです。

文字が読みやすくなるだけで、
ホームページ全体の印象はかなり良くなりますよ。

特にCSSは、CSSファイルを１つ変えるだけで、
ホームページ全体の文字サイズなどを簡単に変更することができます。

ホームページを作るうえで、CSSを覚えることはとても大切で、
設定を簡単にすることができるので、ぜひ覚えていきましょうね！

なお、文字サイズについては、16px が一番読みやすくて、良いと思いますよ。
（私も、文字サイズは16px にしています）