子要素をコンテナーからはみ出して画面いっぱいに広げる方法

子要素をはみ出させたい場合の例

上の画像のように子要素をはみ出させたい場合には

• 画像など要素そのものを端まで伸ばしたい場合
• 要素はコンテナーサイズ（または任意のサイズ）のまま背景のみを端まで伸ばしたい場合

が考えられます。
他にも「他の要素よりも少しだけ外に出したい！」という場合もあるかもしれません。

静的なサイトの場合やトップページなどのコンテナーを指定したdiv要素などから出すことができる場合は大丈夫ですが、
CMSなどを使用して動的にしている場合コンテナーから出すことが不可能な場合があります。
そういった場合のCSSでコンテナーからはみ出させる方法をご紹介します！

他の要素より要素自体を少しだけ出したい

このような場合にはネガティブマージンを使用します。

<div class="container">
　<h2>見出しが入ります</h2>
　<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>

.container {
　width: 960px;
　margin: 0 auto;
}

h2 {
　margin: 0 -50px 20px;
　padding: 20px 10px;
　background: #8FC1F0;
}

上記のようにはみ出させたい要素に-50pxなどネガティブマージンを指定する事で、コンテナーから外に出すことができます。
しかし、このソースコードでは要素内容全てが外に出てしまうため、文字まで外に出てしまいます。

背景だけはみ出させて、文字はコンテナーに収めたい場合にはmarginとpaddingで同じだけの数値を設定しましょう。

h2 {
　margin: 0 -50px 20px;
　padding: 20px 50px;
　background: #8FC1F0;
}

• はみ出させたい場合にはネガティブマージンが便利！
• 背景だけはみ出したい時には、marginとpaddingに同じだけの数値を指定する！

背景を画面幅いっぱいまで広げたい場合

ネガティブマージンを使用する方法では、背景を端まで伸ばそうとする時にレスポンシブのサイトではコンテナー外の余白が可変のためpx単位で正確な数値を指定することができません。

今回紹介している方法では、ネガティブマージンを大きく指定し、同じ分だけpaddingをつけています。
こうすることでまずネガティブマージンで要素のコンテナーの外に大きくはみ出し、paddingを同じ分だけつけることで背景ではなくコンテンツのみをコンテナー内に収まっているかのようにしています。

今回は500%としていますが、9999pxなど絶対的にはみ出る数値であれば大丈夫です。
また、無理にはみ出させているためコンテナーの親要素に overflow: hidden; ではみ出した要素をカットしましょう。

main {
  overflow: hidden;
}

.container {
　width: 960px;
　margin: 0 auto;
}

div {
　margin: 0 -500%;
　padding: 0 500%;
　background: #8FC1F0;
}

この方法では親要素にhiddenを指定しなければならなりませんが、下記の指定方法であれば
親要素に指定する必要もないためおすすめです。

画像などの要素を画面幅ぴったりに広げたい場合

幅いっぱいまではみ出させる場合には上記の方法よりもこちらの方法の方が便利かと思います。

.container {
width: 960px;
margin: 0 auto;
}

div {
width: 100vw;
margin-left: calc(50% - 50vw);
background: #8FC1F0;
}

またはwidthを指定せず左右にネガティブマージンを指定します。

div {
 margin: 0 calc(50% - 50vw);
 background: #8FC1F0;
}

calc(50% - 50vw) でコンテナー外の左右の余白を計算しています。

またコンテンツ全てを全幅ではなく、背景を全幅にし、コンテンツをコンテナー内に収めたい場合には
下記のようにpaddingを指定しましょう。

.container {
 width: 960px;
 margin: 0 auto;
}

div {
 margin: 0 calc(50% - 50vw);
 padding: 0 calc(50vw - 50%);
 background: #8FC1F0;
}

2カラムのコンテンツを全幅にする

これは暫定的な対応なのでもっといい方法があるかもしれませんが、このような方法で対応ができました。
2カラムの場合50%とするとメインカラムの50%となってしまい小さくなってしまうので、サイドカラムも含めた数値になるように計算をしています。
または、(100% * 1.33) の部分をコンテナーのサイズとし、メディアクエリーでコンテナー以下の場合のスタイルを変えることでも対応が可能そうです。
もっと何かいい方法があればぜひお教えください...。

.container {
width: 960px;
margin: 0 auto;
}

div {
 width: 100vw;
 margin-left: calc(((100% * 1.33) / 2) - 50vw);;
 background: #8FC1F0;
}

注意

現状の方法として %とvw で計算をする方法が一番良いかと思いますが、IE9~11 / Edge では%とvwの組み合わせで正常に計算がされない場合もあるようなので注意が必要です。

下記の参考サイトでは文字サイズについてで、私が実装したサイトでは特に問題は起きていませんが念のため頭の片隅に入れておいた方が良さそうです...。
また、vwやvhではスクロールバーも含んでしまうためIEなど意図したデザインになるかよく確認をしてから使用するのが良さそうです。

• calc()で算出したフォントサイズがEdgeでおかしなことに…
• cssにおけるvw, vhの使いドコロ