【CSS】ボックス内から子要素をはみ出させて画面全体の横幅サイズにする方法

今回は、CSSで親要素から子要素をはみ出させて、画面全体の横幅に指定する方法となります。

【CSS】親要素から子要素をはみ出させて画面全体の横幅サイズにする方法

以下のCSSの例では、左右中央揃えとなる親要素から、子要素をはみ出させて画面全体の横幅サイズとしています。

See the Pen xxqoRor by yic666kr (@yic666kr) on CodePen.

以下、CSSのポイントとなる箇所の説明となります。

子要素の横幅サイズを画面全体に指定

まずは、子要素のwidthプロパティに対して、画面全体の横幅サイズとなる100vwを指定します。

単位vwについては、以下のリンク先を参考にしてみてください。

【CSS】高さ・横幅のサイズを画面全体にする簡単な方法｜vw・vh

calc関数ではみ出させるサイズを指定

次に子要素のmargin-leftプロパティにマイナスの値を指定して、親要素から子要素をはみ出させます。

margin-leftに指定する値にはcalc()を利用しています。calc()はプロパティの値に利用できる関数となり、引数には演算子を組み合わせた1つの式を指定でき、その式の結果が値となります。

例のcalc()では、まず、親要素の横幅となる100%の値から、画面全体の横幅サイズとなる100vwを引いたサイズを計算します。

そのマイナスの値は、左右中央揃えとなる親要素の左右の余白と等しいので、その値を半分にして返します。

そのマイナスの値を指定したmargin-leftにより、子要素が親要素の左にある余白分ずれて画面全体の横幅となります。