ど素人から毛を生やす。<延>

サイトコンテンツの幅よりブラウザ最小サイズの方が小さく設定されたサイト

Web > css 2014年11月12日(最終更新:10年以上前)

2014年11月12日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

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

今日はCSSについて。

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

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

幅1400pxだが、ブラウザ最小サイズは1000pxのサイト。
外側各200pxはブラウザサイズによっては見えなくなる。
スクロールバーの表示も1000pxからで、その際外側200pxはスクロール範囲に入らない。

 

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

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

h261112_2

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

h261112_3

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

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


@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:-コンテンツ幅の半分; を使って中央揃えにすることで、上述の状態でも中央揃えが保たれます。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)