画像の片側だけ画面幅いっぱいにする方法01

こんにちは。今日は「画像の片側だけ画面幅いっぱいにする方法」について書きます。

今回はテキスト部分と画像部分の幅が50%と等倍の場合のCSSとなっています！

目標とするデザインはこんな感じです。
画像の右側が画面いっぱいまで広がっているとイメージしてください！

ちなみに今回使いたいCSSを適用しない場合はこんな感じになります。

普通はこのように設定したインナー内におさまりますよね。

みた方が早いと思うのでさっそくコード載せますー！

コード

HTML編

      <section class="contSect">
        <div class="l-inner">
          <div class="sectInner">
            <div class="txtBlock">
              <h2 class="sectTit">タイトル</div>
              <div class="txt">
                <p>内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。</p>
              </div>
            </div>
            <figure class="photo"><span><img src="assets/images/img_azisai.jpg" alt=""></span></figure>
          </div>
        </div>
      </section>

CSS編

  .sectInner {
    display: flex;
  }
  .txtBlock {
    flex: 1;
    margin-right: 70px;
  }
  .photo {
    width: 50%;
  }
  .photo span {
    display: block;
    margin-right: calc((50vw  - 100%) * -1);
  }

今回のポイントは【margin-right: calc((50vw – 100%) * -1);】です！

わかりやすいように図を作ってみたので貼りますね。

本来はinner内で画像が100％に収まるところを、半画面（50vw）から画像100%引いたぶん右マイナスマージンをつけることで画面幅いっぱいまで広がってくれます。

気になる方は試してみてくださいー！

では今日はここまで〜〜