CSS
スマホで表示が小さい
viewport meta タグがない
こんな症状
スマホで見るとページ全体が縮小されて表示される。レスポンシブ対応を始めるときに起きやすいよ。
まず試す
<head> に <meta name="viewport" content="width=device-width, initial-scale=1"> を追加する。
css
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓viewport meta タグが無い
→ <head> に viewport meta を追加する。 - ✓固定幅(px)で組んでいる
→ width:100% や max-width を使い、固定 px を避ける。 - ✓実機での見え方が不安
→ DevToolsのデバイスモードやスマホ実機で確認する。
なぜ起きる？
HTMLの<head>にviewportのmetaタグが書かれていないよ。このタグがないとブラウザはページをPC幅（通常980px）で描画し、スマホの小さな画面に縮小して表示するんだ。そのため文字が小さくなり読めなくなるよ。
✕ エラーが起きるコード
<head>
<title>My Page</title>
</head>
<!-- viewport meta がなくスマホで縮小表示される -->✓ 直したコード
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>✅ 直ったか確認
スマホ（またはDevToolsのデバイスモード）で文字が縮小されず読める大きさで表示されればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- CSSのgapが効かない（Flexbox） — gapを書く場所か親のdisplay設定に問題がある
- Invalid property value（CSSの値が無効） — プロパティが受け付けない値を書いている
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- CSSとは？初心者向けにわかりやすく解説 — 文字の色・大きさの変え方
- CSSでWebページにスタイルを付ける方法 — 色やフォントを付ける手順を解説
📖 関連する用語
🚀 CSSレッスン6：レスポンシブデザインで根本解決しよう！
このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。
CSSレッスン6：レスポンシブデザインへ →