# ホームページ制作初級者｜スマートフォン表示に対応する

## 学習目標
狭い幅でも順序と読みやすさを保ち、横へのはみ出しや操作しにくさを修正する。

## 1. 幅ごとの確認表

課題：meta viewportを確認し、320px、390px、768px程度の幅で表示を比べる。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 2. 切替条件付きCSS

課題：メニューを狭い幅では1列、広い幅では複数列へ変え、境界の前後を記録する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 3. レスポンシブ配置

課題：カード3枚の並びを折り返し、本文の順番と操作の順番が一致するか確認する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 4. はみ出しの修正記録

課題：長い文字列を一つ入れ、どの要素が広がったかを要素パネルで調べる。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 5. 操作のチェック表

課題：指で押す位置を想定してリンク間隔を調整し、キーボードと拡大表示も確認する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 6. スマートフォン対応版一式

課題：広い画面、狭い画面、拡大表示の3状態で同じ情報を探し、問題を修正する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：