ページの最大幅の設定【css】

やりたいこと

・ページ全体を中央に配置する。
幅いっぱいのコンテンツを最大幅960pxに制限してそれ以上横に広がらないようにする。

（ページ全体の幅を固定せずに最大幅だけを設定する手法は、webサイトをモバイル末端の小さい画面にも
対応させるための重要なテクニック）

1.＜div class="wrapper"＞の最大幅を設定する。

body{
  margin:0 0 0 0;
}
.wrapper{
  margin:0 auto 0 auto;
  max-width: 960px;
}

解説

　ページの最大幅を設定して横に長くなりすぎないようにしつつ、ウィンドウが最大幅以下であれば、それに合わせて縮小するように作るのが一般的

ブロックボックスで表示されているコンテンツはウィンドウ幅に合わせて伸びたり縮んだりする。。ウィンドウに合わせて全体の幅が伸縮するのはそのため。

.wrapper{
margin:0 auto 0 auto;
max-width: 960px;
}
と設定することにより、右左のマージン値を「auto」にする。
こうしておくとマージンの大きさが自動で調節され、ウィンドウ幅960px以上の時はページが常に中央に配置される