【HTML＆CSS】幅制限のあるBOX内で、Window幅いっぱいのBOXを設置したい場合のテクニック。

ウェブ制作において、デザインで全体的に幅制限を設定している場合に、

デザイン上「Window幅いっぱいのボックス」を置きたいときがあります。

図説すると、こんな感じなんですが(笑)

これをどうにかするテクニックをご紹介いたします。

【HTML】

<main>
  <h2>メインBOX</h2>
  <div class="wide-box">
    <h3>.wide-box</h3>
  </div>
</main>

【CSS】

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 0;
  background: #fee;
}
.wide-box {
  box-sizing: border-box;
  width: 100vw;
  margin: 40px calc(50% - 50vw);
  padding: 30px;
  background: #ddf;
}

これでOKです。

※わかりやすいように、背景色をつけております。

ただ、ちょっと注意が必要で、親のメインBOXがきちんと中央に配置されている必要があります。

（つまり、サイドメニューなどが存在している場合のレイアウトには使用できないと思います。）

■解説

もう解説は不要かもしれませんが、一応。

50% の幅から 50vw を引くと、main の外側の幅のネガティブマージンになる、というわけです。

それを calc で算出して margin に組み込んだ、というのが今回の手法です。

padding は自由に変えていただいて大丈夫です。

それを実現するために box-sizing: border-box; を入れております。

デザイナーさんから上がってきたデザインで、こういった幅制限を無視したものは結構あるかと思いますので(^^;)

そういうのを実現する際に便利だと思います。

例えば、幅制限のあるサイトに画像スライダーを設置したいってなったとき、最大幅を突き抜けてWindow幅いっぱいのものがデザインで挙がってくるとか(笑)

いや、ホント「あるある」ですよね、こういうの(^^;)