こんにちは。

すっかり秋になりましたね。

あれだけ毎日暑くて嫌だったのにいざ夏が去ってしまうとなんだか寂しい気持ちになります。

特に今年はコロナで外になかなか出られなかったので「夏」という季節をあまり実感できなかったですしね。

では本題に入ります！

一部だけ背景を画面いっぱいにする方法

例えば、こんなデザインがあったとします。

普通PCのコーディングをするとき、インナーで幅を指定してmargin:0 auto;でセンター寄りにしますよね。（1000pxや1200pxなど）

ちなみに私の場合はだいたい、【inner】や【sectInner】というクラスをふっています。

幅を設定したその中に背景色を付けたらもちろんそのインナー内にしか付きません。

もちろん、インナーの外のセクションなどに背景色を付けて解決できることもあります。

しかし今回はインナーを設定したセクションの中に画面いっぱいに背景色を付けた部分があると仮定するのでそれはできません。

擬似要素を使った方法を書きます！

コード

背景色がグレーの部分のコードです。

HTML編

          <section class="contSect -dammy">
            <div class="sectInner">
              <h3 class="sectTit">タイトルタイトルタイトル</h3>
              <div class="sectMain">
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              </div>
            </div>
          </section>
          <!-- /.contSect -->

.sectInnerで幅を指定して、中身をmargin:0 auto;で中央寄せにしています。

CSS編

.contSect.-dammy
{
  position: relative;

  text-align: center;

  &:before
  {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;

    display: block;

    width: 200vw;
    height: 100%;

    background-color: #efefef;

    content: "";
    transform: translateX(-50%);
  }
}

こんな感じです。

100vwで画面幅いっぱいということですね。

画面が縮んだ時にも対応できるよう200vwにしています。

left:50%;で真ん中からスタートさせ、transformで幅半分左にずらします。

それで画面幅いっぱい覆ってくれるということです！

では今日はここまで〜〜