スマホで見るとレイアウトが崩れる

✅ 回答

スマホ対応（レスポンシブデザイン）には3つのポイントがあります。

原因1：viewport メタタグがない

これがないと、スマホでもPC用の幅（通常980px）で表示され、文字が小さくなります。

<!-- ✅ head に必ず書く -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

原因2：幅を px で固定している

/* ❌ 固定幅だとスマホではみ出す */
.container { width: 960px; }

/* ✅ 最大幅 + 自動調整 */
.container { max-width: 960px; width: 100%; margin: 0 auto; }

原因3：メディアクエリを使っていない

画面幅に応じてスタイルを切り替えるには @media を使います。

/* スマホ用のスタイル（768px以下） */
@media (max-width: 768px) {
  .nav { flex-direction: column; }
  .card { width: 100%; }
}

確認方法

開発者ツール（F12）の左上にあるスマホアイコンをクリックすると、スマホ表示をシミュレーションできます。実機で確認する前にここでチェックしましょう。

まとめ：①viewport メタタグを書く、②幅は % や max-width を使う、③メディアクエリで画面幅に応じたスタイルを書く。この3つでスマホ対応できます。

症状別フローチャート

「スマホで崩れる」と言っても原因はさまざまです。以下の順番で確認しましょう。

Step 1: viewport メタタグがあるか確認 → なければ追加（これだけで直ることが多い）

Step 2: CSSに固定幅（width: 960px等）がないか確認 → あれば max-width + width: 100% に変更

Step 3: 画像に max-width: 100% が設定されているか確認 → なければ追加

Step 4: メディアクエリのブレークポイントが正しいか確認 → 768px以下でスマホ用スタイルが効いているか

よくある具体例：画像がはみ出す

画像にwidthやmax-widthを指定していないと、元の画像サイズのまま表示されてスマホからはみ出します。

/* ❌ 画像がスマホからはみ出す */
img { /* 何も指定なし */ }

/* ✅ 画像を親要素に収める */
img { max-width: 100%; height: auto; }

よくある具体例：ブレークポイントのミス

メディアクエリの条件を間違えると、スマホ用スタイルが効きません。

/* ❌ min-widthだとスマホでは効かない */
@media (min-width: 768px) {
  .nav { flex-direction: column; }
}

/* ✅ max-widthでスマホ以下に適用 */
@media (max-width: 768px) {
  .nav { flex-direction: column; }
}

中高生あるある：学園祭サイトがスマホで崩れた

学園祭のWebサイトをPCで作って「完成！」と思ったら、友達がスマホで見たとき横スクロールが出てしまった——これは非常によくあるケースです。原因はほぼ「viewport メタタグがない」か「幅をpx固定にしている」のどちらかです。ポートフォリオサイトをスマホで先生に見せるときも同じ問題が起きます。提出前に必ずスマホ表示を確認しましょう。

Chrome DevTools でスマホ表示を確認する手順

実機がなくてもPCのブラウザでスマホ表示を確認できます。

1. Chromeでページを開き、F12キー（またはCtrl+Shift+I / Cmd+Option+I）でDevToolsを開く

2. DevTools左上のデバイスアイコン（スマホとタブレットの形）をクリック

3. 上部のドロップダウンから機種を選択（iPhone SE、Pixel 7など）

4. 画面幅を変えながらレイアウトが崩れるポイントを探す

この方法で崩れる画面幅がわかったら、その幅をブレークポイントにしてメディアクエリを書きましょう。

レスポンシブ対応チェックリスト

サイトを公開する前に、以下を確認しましょう。

✅ head内にviewport メタタグがある

✅ body や container に固定幅（px）を使っていない

✅ 画像に max-width: 100% と height: auto を指定している

✅ テーブルが横にはみ出していない（overflow-x: auto で対応）

✅ フォントサイズが小さすぎない（最低14px以上）

✅ タップ対象（ボタン・リンク）が小さすぎない（最低44px×44px推奨）

✅ 横スクロールが発生していない

特に学園祭サイトやポートフォリオは、先生や友達がスマホで見ることが多いです。PCだけでなくスマホでの見え方を必ず確認してから提出・公開しましょう。DevToolsのデバイスモードで iPhone SE（幅375px）と iPad（幅768px）の2つで確認すれば、ほとんどのケースをカバーできます。