どもです。
近頃めっきり肌寒い餅。です。

今日はCSSについて。

サイトトップのコーディングを依頼されたので、渡されたPSD通りに作りました。
ただ、サイト幅が1400pxって少々広すぎやしないかと思っていたのですが…

完成してから、サイトの仕様を言い渡されました。遅いわ(´・ω・｀)

図解するとこういうことです。

図解してもよくわからないので例示するとこんな感じです。

あるいは、こんな感じです。

できるかそんなもん。
と咄嗟に思いましたが、考えてみれば普通にできそうですねこれ。

というわけでやってみました。

@media screen and (min-width: 1001px){
body,html{
	width:100%;
	overflow-x:hidden;
	}
}
@media screen and (max-width: 1000px){
html{
	width:1000px;
	overflow-x:scroll;
	}
body{
	width:1000px;
	min-width:auto;
	overflow-x:hidden;
	}
}
body>div{
	width:1400px;
	position:relative;
	left:50%;
	margin-left:-700px;
	}

レスポンシブサイト御用達の@media screen。1000px以下とそうでない場合で挙動を分けます。

1001px以上のときは、コンテンツ幅＝ブラウザサイズ。
かつoverflow-x:hiddenにすることで、ブラウザからはみ出たコンテンツを非表示にします。

1000px以下のときはhtml、body共に幅を1000pxに固定。
bodyをoverflow-x:hiddenに、htmlを:scrollにすることで、1000pxから出たコンテンツは表示されず、かつ1000pxまでのスクロールバーを表示させることができます。

コンテンツについてですが、margin:0 autoではなく、position:relative; left:50%; margin-left:-コンテンツ幅の半分; を使って中央揃えにすることで、上述の状態でも中央揃えが保たれます。