web関連
【css】親要素に収まっている子要素を左右はみ出させる
親要素に収めていた子要素がデザインの変更で横にぶち抜かなくてはいけなくなりなんかいい方法ないかなと思って調べたらあったので備忘録
コード
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
padding: 0 calc((100vw - 100%) / 2);
簡単に説明すると
「100vw」はブラウザのウィンドウの幅を取得する
「- 100%」で指定した子要素の幅を取得しウィンドウの幅から引く
子要素とウィンドウの間の幅が取得できる
取得した幅を「 / 2)」で割ると片側の幅が取得できる。
これを左右行い子要素からはみ出させるために「* -1」でネガティブマージンにする
これだけだと子要素の中身がよってしまうのでmarginで行った事をpaddingで相殺すれば完了
簡単かなぁ…
四則演算の「かっこ（）」を使った計算の順序を理解できてない大人が多いいって記事どこかでみたなぁ
デザインでよくよく見たら子要素の右側だけウィンドウ幅いっぱいにぶち抜かないといけなくなったりしたときにめちゃ役に立った