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