01 / AZURE BASICS
学習目標と所要時間
狭い画面でも横にはみ出さず、文字・画像・リンクを使えるようにする。
前提：前章までのファイルと学習記録を用意します。
02 / AZURE BASICS
説明：仕組みと具体例
この章の考え方
詳しく見る
レスポンシブデザインとは、画面幅に応じて読みやすい配置へ変えることです。スマートフォンを小さなPC画面として縮小するだけでは文字も操作対象も小さくなります。横3枚のカードを縦1列へ切り替え、画像は親要素の幅に収めます。
具体的な仕組み
詳しく見る
@media(max-width:640px)は画面が640 CSSピクセル以下のときだけ使う指定です。ピクセルは画面上の長さの単位で、物理的な端末の画素数とは一致しない場合があります。width:100%;height:autoで画像の縦横比を保てます。固定幅900pxのままにしないことが重要です。
使うときの判断
詳しく見る
開発者ツールの端末表示は有用ですが実機と完全には同じではありません。幅390・768・1280程度で確認し、可能なら自分のスマートフォンでも公開後に確認します。縦向き・横向き、文字の拡大、キーボード操作、動きを減らす設定も考慮します。
03 / AZURE BASICS
場面で学ぶ：スマートフォンに対応する
場面を順に追う解説アニメです。初期状態は停止しています。「次の場面」でゆっくり読むか、自動再生を選べます。動きを減らすOS設定では手動で進めます。
04 / AZURE BASICS
操作手順：一つずつ確かめる
- 開発者ツールの端末ツールバーを開き、幅390pxにする。
- メニューカードが1列になることと、画像がはみ出さないことを確認する。
- 幅640pxの前後で配置の切り替わりを観察する。
- 本文を200%拡大し、リンクを押せるか、文字が重なっていないか確認する。
- 幅と確認結果を表に記録して修正する。
05 / AZURE BASICS
演習：自分で変え、結果を残す
意図的に画像へwidth:900pxを付けてはみ出す原因を観察し、width:100%へ戻す。390pxと1280pxで同じ情報が読めることを確認する。
対象と目的／使用環境／変更した内容／期待した結果／実際の結果／失敗時に確かめたこと／まだ未実施のことを記録してください。スクリーンショットに認証情報や請求の個人情報を含めません。
06 / AZURE BASICS
安全なコード練習：編集して確認
HTML・CSS専用の練習です。JavaScript、外部通信、フォーム送信を実行しません。画像は同梱cafe.svgのみ表示します。変更は自動保存されません。残す場合はエディターへコピーしてください。
07 / AZURE BASICS
完了チェックと学習記録
説明できたこと、実際に確認したことだけをチェックします。学習進捗と下のメモは、このブラウザーのローカルストレージへ保存し、外部送信しません。別端末とは同期せず、サイトデータ削除・プライベートモード・保存禁止では保持できない場合があります。秘密情報は記入しないでください。
08 / AZURE BASICS
よくある失敗と対処
- overflow:hiddenで内容を隠すだけ：原因の固定幅を直す。
- 端末表示だけで完成とする：可能な範囲で実機・別ブラウザーも確認する。
09 / AZURE BASICS
確認日と公式資料
公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。