ブロック要素のレイアウト練習

概要
1. 目的
ブロック要素を左右に配置する考え方
1. 左寄せ・中央寄せ・右寄せの書き分け
課題の進め方
1. 画面幅が狭いときにはみ出させない
よくある間違い
確認チェックリスト
関連する練習
参考資料
答え（作業完了後にみてください。）
1. ブロック要素のレイアウト問題答え

概要

コードを編集し、以下の動画のようなレイアウトを作成してください。

ヒント

marginの左右をautoにすると中央寄せ。
margin-leftをautoにすると右寄せ。
margin-rightをautoにすると左寄せ。

目標

目的

ブロック要素の中央寄せ、左寄せ、右寄せを理解する。

ブロック要素を左右に配置する考え方

ブロック要素は、指定がなければ親要素の横幅いっぱいに広がります。横幅いっぱいの箱には左右へ動かせる余白がないため、中央寄せや右寄せを確認するときは、まず子要素へ親より小さいwidthまたはmax-widthを指定します。

.box {
  width: 300px;
  margin: 0 auto;
}

margin: 0 auto;は上下の余白を0、左右の余白を自動計算にします。残った横方向の余白が左右へ分配されるため、幅を指定したブロック要素が中央に配置されます。

左寄せ・中央寄せ・右寄せの書き分け

/* 左寄せ（通常は初期状態でも左に配置されます） */
.box-left {
  width: 300px;
  margin-right: auto;
}

/* 中央寄せ */
.box-center {
  width: 300px;
  margin-right: auto;
  margin-left: auto;
}

/* 右寄せ */
.box-right {
  width: 300px;
  margin-left: auto;
}

margin-left: auto;は残った余白を要素の左側へ集めるため、要素が右へ移動します。反対にmargin-right: auto;は余白を右側へ集めます。

課題の進め方

目標画像を見て、左・中央・右へ配置する3つのブロックを確認します。
開発者ツールで各要素の親子関係を確認します。
対象要素へ背景色やoutlineを一時的に付け、箱の範囲を見えるようにします。
親より小さいwidthを指定してから、左右のmarginを調整します。
ブラウザーの幅を狭め、横スクロールやはみ出しが起きないか確認します。

画面幅が狭いときにはみ出させない

固定幅だけでは、スマートフォン幅で要素が画面からはみ出す場合があります。練習後はwidthとmax-widthを使い分けて確認しましょう。

.box {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

この指定なら、広い画面では最大300px、狭い画面では親要素に収まる幅になります。

よくある間違い

幅を指定せずに中央寄せする：箱が親幅いっぱいだと、左右の自動余白を確認できません。
text-align: center;を使う：これは主に箱の中の文字やインライン要素を中央へ揃える指定です。ブロック要素そのものの中央配置とは分けて考えます。
右寄せしたい要素へmargin-right: auto;を指定する：余白が右側へ入るため、要素は左側に残ります。右寄せはmargin-left: auto;です。
見た目だけで対象を選ぶ：開発者ツールで背景色やボックスモデルを確認し、動かしたい箱へ指定します。
固定幅のまま小さい画面を確認しない：ブラウザー幅を狭め、横スクロールが出ないか確認します。