CSSで親要素を無視して（突き抜ける、はみ出す）画面幅いっぱいに広げる方法
特定のセクションのみ横幅いっぱいに背景があるデザインって多くないですか？ 今回はそんなデザインのコーディング時のテクニックをご紹介します。
目次
CSSで親要素を無視して（突き抜ける、はみ出す）画面幅いっぱいに広げる方法
結論を言ってしまうと画面幅いっぱいに広げたい要素に以下のCSSを適用するだけです！
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);子要素の中身の幅が親要素の幅を維持したい場合は
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
padding-right: calc(50vw - 50%);
padding-left: calc(50vw - 50%);解説
これだけで終わってしまってはなぜ画面幅いっぱいになるか不思議な方もいるかと思いますので簡単な解説をします。
HTML、CSSは以下を例にします。
<div class="container">
<div class="section"></div>
<div class="section"></div>
</div>.container {
width: 1000px;
margin: 0 auto
}marginは%で指定すると親要素の幅基準の相対値
親要素（.container）の幅は1000pxです
子要素(.container)にmargin-left: 50%;と設定します。
marginは%で指定すると親要素の幅基準の相対値となるため1000pxの50%は500pxなのでmargin-left: 500px;と同義です。
この仕様はpaddingも同様です。
単位vwは画面幅の相対値
単位vwは画面幅の相対値なので
画面幅1200pxのときの50vwは600pxとなります。
画面幅いっぱいに広がるCSSを図にします
簡単な図にすると
何もスタイルを書いてない状態
これは子要素に何もスタイルを書いてないプレーンな状態です。
まずはmargin-right:50%;を当ててみる
.section {
margin-right: 50%;
}
親要素が600pxなので右に300pxのマージンが入ります。
先程の値を-50vwしてみる
.section {
margin-right: calc(50% - 50vw);
}
50%(300px) - 50vw(500px) = -200px
上記のように計算すると親要素の外側の幅のネガティブマージンがもとめられます。
親要素を突き抜けましたね。
同様のことをmargin-leftにも適用する
.section {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
これで完全に子要素が親要素を突き抜けます。
子要素の内部の幅は親要素の幅を維持したい
親要素の幅を維持したいとはつまりどういうことか？
以下の図のように
親要素を突き抜けた状態だとテキストや画像を置いた場合画面端からはじまります。
paddingで親要素の外側を指定する
padding-right: calc(50vw - 50%);
padding-left: calc(50vw - 50%);上記の用にpaddingを指定すると親要素の外側のpaddingをもとめることが出来ます。
最後に
この手法は結構有名だとは思いますが解説してみました。
僕がいままでサイトを構築していてかなり使用すことが多かったです。特定のセクションのみ横幅いっぱいに背景があるデザインが多かったというのもありますが
