[css]inner幅を飛び越えて、子要素を画面幅いっぱいにしたい時

innerが決まっているけど、その子要素だけ画面幅いっぱいにしたい時ってどうやって実装するのだろう。

下記図のように黄色ブロックは、innerを飛び越えています。この実装が少しややこしい。

そんな時は、

①widthを100vwにする

②argin-right: calc(50% – 50vw);でネガティブマージンをつける

これでinnerを無視して、画面幅いっぱいのブロックを作れます。

具体的なコード

具体的なコードは下記です。

.inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.container {
  background: #00CC99;
  width: 100vw;
  margin-right: calc(50% - 50vw); /* 画面幅いっぱいに広げる */
}

まずwidhを100vwにする。

しかしinnerが起点になるので、画面幅から大きくずれる。

次に左の余白分を詰める。

そのためにはまず余白を計算する。この計算式が、50%-50vw

この時、50%-50vwは必ずネガティブマージンになる。(例えば、-320のようにマイナスの値になる。)

これをmargin-leftに設定することで、余白調整され画面幅いっぱいになる。

反対にmargine-rightで設定する場合は、calc(50vw-50%)となる。

まとめ

いかがでしたでしょうか。

inner幅を飛び越えて、子要素を画面幅いっぱいにするためには、

①widthを100vwにする

②margine-leftにcalc(50%-50vw) (margine-rightならcalc(50vw-50%))

を設定することで解決できます。

もしも同じように詰まってる方の参考になれば幸いです。

以下Xで質問など質問やご相談を承っております。お気軽にご連絡ください。