親要素の幅がすでに決まっている場合に、「ここだけは画面いっぱいに表示したい」と思った時に皆さんはどうしますか？

私は以前まではいちいち親要素から出すというコーディングをしていました。

自分でコーディングしているならそれで良いですが、CMSで決められた親要素の中でしか記述できない場合は、そもそも親要素から出すことができません。

ところが、便利なCSSのcalcとvwを使うと親要素の幅からはみ出して子要素の幅を画面いっぱいにすることができます。

完成したコード

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説5 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

ベースのコード

HTML

<div class="parent">
  <div>親要素の幅500px</div>
  <div class="fullwidth">この子要素を画面いっぱいにしたい</div>
</div>

シンプルに親要素parentがあって、その中に子要素fullwidthがあります。このfullwidthを親要素の幅からはみ出して画面いっぱいにしていきます。

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

.parent{
  background: #eee;
  height: 500px;
  margin: 0 auto;
  padding: 10px;
  width: 500px;
}

.fullwidth{
  background: #7f31d6;
  color: #fff;
  padding: 10px;
}

最初の5行目まではブラウザのデフォルトスタイルをリセットしています。

今回は親要素parentの幅は500pxにします。画面いっぱいにしたい子要素fullwidthは現状では装飾のスタイルを指定しただけの状態です。

ここまでの結果。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

当然ですが、親要素の中に収まってます。

子要素を画面と同じ幅にする

ここで今回のポイント1つ目のvwが登場します。先ほどまでは親要素の中に収まっていた子要素fullwidthですが、CSSに一文width:100vw;を追加するだけで画面と同じ幅になります。

.fullwidth{
  background: #7f31d6;
  color: #fff;
  padding: 10px;
  width:100vw;
}

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説1 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

先ほどと変わり、fullwidthが親要素を突き破っていますね(笑)

右に見切れてしまってわかりにくいですが、幅はブラウザの幅と同じになっています。

vwは親要素の幅ではなくブラウザの幅を基準にしますので、width:100vw;と書くと上の結果のようになります。あとは表示位置がずれてしまっているので、左端を基準にして画面内に収まるようにしていきます。

Viewport(vw・vh)については以前に解説していますので、ぜひこちらも見てみてください！

基準の位置を画面の左端にする

次に今回のポイント2つ目のcalcが登場します。子要素fullwidthにmargin: 0 calc(50% - 50vw);を追加すると、基準の位置を画面の左端にすることができます。

.fullwidth{
  background: #7f31d6;
  color: #fff;
  margin: 0 calc(50% - 50vw);
  padding: 10px;
  width: 100vw;
}

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説3 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

親要素の幅からはみ出して子要素の幅が画面いっぱいになりました！ここが今回の一番のポイントなので解説します。

まずは子要素の左端を画面の真ん中する

margin: 0 calc(50% - 50vw);をわかりやすくするために分解してやっていきます。

まずはcalcなしでmargin: 0 50%;としてみます。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説4 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

こうすることでタイトルの通り、子要素fullwidthの左端を画面の真ん中することができました。

画面の幅半分だけ左に移動する

ここで先ほど登場したvwが再度登場します。今、子要素fullwidthの左端は画面の真ん中になっていますので、あとは画面の幅半分だけ左に移動するためにmarginの50%から-50vw(画面の半分の値)を引いてやれば良いわけです。

そこでmargin: 0 calc(50% - 50vw);とすることで子要素の左端を画面の真ん中にして、そこからさらに画面の幅半分だけ左に移動するということができます。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説3 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

画面いっぱいにした上で、中身は親要素の幅に合わせる

さて、ほぼゴールに近づいて来ましたが、まだ1つやりたいことがあります。

子要素fullwidthが画面いっぱいなったのは良しとして、その中身を親要素の幅に合わせたいです。以下が結果です。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説5 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

よく見るやり方で、背景は画面いっぱいにして中のコンテンツは親要素と合わせたい場合に活きる方法です。

これは実はすごく簡単で、marginとは反対の計算をpaddingでしてあげればできます。

margin: 0 calc(50% - 50vw);
padding: 10px calc(50vw - 50%);

難しいことは抜きにして、これでできるとだけ覚えてください（笑）

まとめ

冒頭に書きましたが、CMSで親要素の幅が決まってしまっている場合、本来ならその幅でしかコンテンツを追加できませんが、この方法を使えば画面幅いっぱいのダイナミックなレイアウトができるようになります。ぜひやってみてください！