【CSS】親要素に収まっている子要素を左右はみ出して画面いっぱいに表示する方法

今回は、親要素に収まっている子要素を左右はみ出して画面いっぱいに表示したり、片側だけ画面いっぱいに表示する方法をご紹介します。
実装方法は多岐にわたるかと思いますが、今回はcalc関数を使ってコピペで実装完了する方法を記載していきます。

下記コードをはみ出させたい子要素へ指定します。

vwはスクロールバーの領域も含めた幅になるため、インナー幅を指定した要素より親または祖先の要素に下記コードを指定します。

上記のコードを説明すると、
まず、ブラウザのウィンドウの幅を取得するため、「100vw」という値を使用します。
次に「- 100%」で子要素の幅を取得し、ウィンドウの幅から引くことによって、子要素とウィンドウの間の幅を取得します。この取得した幅を「 / 2)」で割ることによって、片側の幅を取得することができます。
しかし、このままだと、子要素がはみ出してしまうため、「* -1」でネガティブマージンにすることで、子要素からはみ出すようにします。
ただし、この方法だと、子要素の中身がよってしまうことがあります。そのため、marginで行ったことをpaddingで相殺することによって、要素を正確に配置することだできます。
最後にインナー幅を指定した要素より親または祖先の要素にoverflow-x:hidden;を指定すれば完了になります。

以上が、親要素に収まっている子要素を左右はみ出して画面いっぱいに表示する方法になります。
最後までご覧いただきありがとうございます。