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;
}