CSSで親要素のwidthを無視して背景を画面幅いっぱいに広げる方法

2023-03-16

本記事では親要素のwidthを無視して背景を広げる方法をご紹介します。

調整前構造

HTML

<main class="l-main">
  <div class="p-hoge">
    <div class="p-hoge__bg">
      <p class="p-hoge__text">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
    </div>
  </div>
</main>

CSS

.l-main {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.p-hoge {
  width: 100%;
}

.p-hoge__bg {
  background-color: #f00;
}

表示イメージ

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

※青背景部分が.l-main, 赤背景部分がp-hoge

背景を画面幅いっぱいに広げるCSSを追記する

.p-hoge__bg {
  background-color: #f00;
  /*  ↓ Add */
  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);
  padding-left: calc((100vw - 100%) / 2);
  padding-right: calc((100vw - 100%) / 2);
  /*  ↑ Add */
}

下記のように背景が画面幅いっぱいになります

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

Sassを使う場合はmixinを作っておくと便利です

@mixin contents-full {
  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);
  padding-left: calc((100vw - 100%) / 2);
  padding-right: calc((100vw - 100%) / 2);
}