スマホでホームページを見ると、
「文字が小さくて読みにくい…」と感じたことはありませんか？
パソコンではちょうど良く見えるのに、スマホだけ文字が小さくなってしまうケースはとても多いです。
でもこれは、ちょっとした設定を直すだけで簡単に改善できます。
そこで、この記事では、初心者の方でもすぐできる文字サイズの直し方を、分かりやすく解説しますので、ぜひ最後までご覧くださいね！
スマホで文字が小さくなる主な原因
スマホで文字が小さくなる主な原因について、まずは、よくある原因を知っておきましょう！
文字サイズを指定していない
HTMLやCSSで文字サイズを決めていないと、
スマホでは自動的に小さく表示されることがあります。
スマホ用のCSSが設定されていない
パソコン用のデザインだけ作っていて、
スマホ用の調整をしていないと、文字が小さくなります。
viewportの設定が間違っている
スマホ表示に必要な設定が入っていないと、
画面全体が縮小されて、文字も小さく見えてしまいます。
まず最初に確認したいポイント
次に、最初に確認したいポイントをご紹介します。
viewportが入っているか確認
HTMLの中に、次のような「viewport」の記述があるか確認してください。
<meta name="viewport" content="width=device-width, initial-scale=1.0">これが無い場合、スマホでは正しいサイズで表示されません。
スマホ用のスタイルがあるか確認
CSSに、画面が小さいとき用の設定があるかを見てみましょう。
たとえば、次のような形です。
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}これがあるだけでも、文字の見やすさは大きく変わります。
スマホで文字を見やすくする方法
スマホで文字を見やすくする方法をご紹介します。
CSSで文字サイズを指定する
まずは基本として、本文の文字サイズを指定します。
body {
font-size: 16px;
line-height: 1.6;
}これだけでも、かなり読みやすくなります。
スマホ用に少し大きくする方法
スマホでは、パソコンより文字の大きさを少し大きめがおすすめです。
@media screen and (max-width: 768px) {
body {
font-size: 17px;
}
}16px か、17px くらいがちょうどよいと思います。
おすすめの文字サイズと行間の目安
スマホサイトを作るときは、次のような大きさにすると良いです。
- 本文：16px〜18px
- 見出し：本文より少し大きめ
- 行間：1.5〜1.7くらい
これだけで、かなり読みやすくなりますよ！
それでも小さいと感じるときの追加対策
ここまでの設定を入れて、それでも文字サイズが小さいと感じるときは、下記のことを確認してみてください。
拡大操作を禁止していないか確認
ズームをできない設定にしていると、見づらくなることがあります。
基本的にはズームは許可しておく方が安心です。
横幅が固定になっていないか確認
ページ全体の幅を固定していると、スマホでは縮小されて文字が小さく見えます。
幅はなるべく「100%」など、画面に合わせる形にしましょう。
よくある失敗と注意点
- 一気に文字を大きくしすぎて不自然になる
- スマホだけでなくパソコン表示まで変わってしまう
- 一部の場所だけ設定して統一感がなくなる
少しずつ調整するようにしましょう！
【まとめ】スマホの文字は少しの調整でとても読みやすくなる
「スマホでホームページの文字が小さいときの直し方」の記事は参考になりましたでしょうか？
スマホで文字が小さい原因のほとんどは、
- 表示設定の問題
- CSSの調整不足
です。
viewportを確認し、スマホ用に文字サイズを少し調整するだけで、見やすさは大きく改善しますよ。
ぜひ一度、自分のホームページでも試してみてくださいね！
