全ての親要素の padding を無視して横いっぱいに要素を広げる方法

CSSを書いていて、親要素からはみ出して表示したくなるときってありませんか？

ページを作成する上で、左右の padding を一括で設定してしまいたいですよ。
しかし、特定の要素だけそれを突き抜けて背景色が付いている…という状況です。
具体的には下記のような状態です。
（わかりやすいように左右に border を引いています）

f:id:hotate0:20191117215751p:plain

しかし、 padding を一括で設定してしまうと下記のような状態になってしまいます。

f:id:hotate0:20191116142332p:plain

padding を指定したまま、横いっぱいに要素を広げる方法を紹介していきます。

これで解決できればこれでいいと思います。
この値を sass の変数として管理しておけば、変更にも強くなります。
#{} を使用して、マイナスにしてあげればいいです。

対象の要素が複数の要素の下にあり、それぞれの要素に padding の指定がある場合、1 の方法では対応できません。
必要な値を計算すればいいのですが、面倒ですし、変更にも弱く、現実的とはいえません。

そんな時に便利なのが、 vw を使った指定です。
横いっぱいに広げたい要素に下記の指定をするだけです。

margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);

これの仕組みを簡単に説明しようと思います。

横いっぱい（100vw）から、対象の要素の値（100%）を引きます。
この計算結果は、左右の余白（padding）となります。しかし、これだけでは左右の合計値です。

2で割ることで、片方の値にします。
そこにさらに -1 をかけることでネガティブマージンの値ができあがります。

原理自体は 1 の方法と同じです。
画面端からの距離を自動で計算してくれるようになっています。
1 の方法を使わず常にこちらを使用してもいいかと思います。

1 の方法は単純に親要素を無視するとき、2 の方法は画面いっぱいにしたいとき、という形にはなるかと思います。

1-4no diary