親要素の幅に関係なくブラウザ幅いっぱいに要素を表示する方法

デザインしてるときに、**「ここだけブラウザの端から端まで背景を伸ばしたい！」**って場面ありませんか？

でも、要素が親要素に囲まれていると、width: 100% にしても親の幅に制限されちゃうんですよね。

今回は、親要素の幅に左右されず、ブラウザ幅いっぱいに表示する方法をご紹介します！

どういうときに使うの？

例えばこんなとき👇

• コンテンツ幅は中央寄せだけど、見出しの背景だけ画面全体に広げたい
• セクション区切りの背景色を、ブラウザいっぱいに表示したい
• 画像や帯だけ、ブロック全体で見せたいとき

サンプル

See the Pen
親要素の幅に関係なくブラウザ幅いっぱいに要素を表示する方法 by webmoyou (@yydliugt-the-animator)
on CodePen.

よくある失敗例

<div class="wrapper">
  <div class="full-bg">背景を横いっぱいにしたい</div>
</div>

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}

.full-bg {
  background: #d8f2d1;
  padding: 30px;
  width: 100%;
}

この場合、.full-bg の width: 100% は .wrapper の幅を基準にしてしまうので、結局中央寄せのまま背景がはみ出ない…！

解決法：position: relative; と left/right を使う！

.full-bg {
  background: #d1f1f2;
  padding: 30px 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

仕組みのポイント

• width: 100vw; → ブラウザのビューポート全体の幅に指定
• left: 50% → 要素の起点を中央に
• margin-left: -50vw → ビューポート幅の半分だけ左にずらす
• 結果：画面の左端から右端までピッタリの幅になる！

注意点

• 要素が overflow: hidden の親要素に入っていると、はみ出た部分が切り取られるので注意！
• vw はスクロールバーの幅も含まれるので、環境によって微妙なズレが出ることがあります（調整が必要なときも）

まとめ

• 通常の width: 100% では親要素の幅に依存する
• ビューポート基準で表示したいなら 100vw + margin-left: -50vw を活用！
• 見た目の幅広デザインに重宝するテクニックです！