CSS レイアウト – widthとmax-width

width、max-width、およびmargin: auto;の使用

前の章で述べたように、ブロックレベル要素は常に利用可能な全幅を取ります（左右に伸びます）。

ブロックレベル要素の幅を設定すると、要素がコンテナの端まで伸びなくなります。その後、marginをautoに設定して、要素を水平方向にコンテナの中央に配置することができます。要素は指定された幅を取り、残りのスペースは両方のマージンに均等に分割されます。

この

要素は幅が500pxで、marginがautoに設定されています。

注意：上記の<div>の問題は、ブラウザウィンドウが要素の幅よりも小さい場合に発生します。その場合、ブラウザはページに水平スクロールバーを追加します。

この状況ではmax-widthを使用すると、小さなウィンドウでのブラウザの処理が改善されます。これは、小さなデバイスでサイトを利用可能にする際に重要です：

この<div>要素はmax-widthが500pxで、marginがautoに設定されています。

ヒント：ブラウザウィンドウの幅を500px未満にリサイズして、2つのdivの違いを確認してください！

上記の2つのdivの例：


div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}