【CSS】親要素で幅が指定されているときに、子要素でウィンドウ幅まで広げる

コンテンツを中央寄せするときに、親要素に max-width をもたせて左右の margin を auto にすることで実装することは多いと思います。

その時、子要素も親要素の width になってしまいますが、子要素の width をウィンドウ幅いっぱいに広げる方法です。

例

<div class="parent">
   コンテンツ
   <div class="child"></div>
</div>

.parent {
  max-width: 500px;
  margin: 0 auto;
}

このときに、もちろん子要素.childも親要素と同じ500pxになります。ですが、デザインによってこの幅をはみ出してウィンドウ幅いっぱいにしたい、という要望はよくあります。

本来であれば、.inner { max-width: 500px; margin: auto; } のような汎用的なクラスを用意して、それを使い回すことでウィンドウ幅いっぱい / サイトの特定の幅のコンテンツを作り分けるのが良いですが、ウェブサイトではそうもいかない場面もあります。

ウィンドウ幅いっぱいに広げたい場合は、ネガティブマージンを設定することで実現できます。

/* window　幅いっぱいに広げる */
.child {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

margin は余白を指定する際に使うプロパティですが、マイナスの値をつけることでその方向へ要素が広がっていきます。

また vw（viewport width）はウィンドウの幅に対する割合で計算されるため、50vwとするとウィンドウ幅のちょうど半分のサイズになります。

中央寄せになっている要素の左右の余白は、

ウィンドウ幅の半分の width – 対象要素の width の半分

により導き出せます。
今回はその余白分をマイナスしたいので、この式を逆転させて…

  margin: 0 calc(要素の半分 - ウィンドウ幅の半分);

とすると左右の余白分がマイナスされて、親要素の width サイズを超え子要素をウィンドウ幅いっぱいに広げることができます。

ですが、ネガティブマージンは要素をずらすことはできますが、width が増えることはありません。そのため、width を画面幅いっぱいに広げるために width: 100vwを追加してあげます。