CSSで片側だけ画面幅いっぱいに広げる方法

CSSで片側だけ画面幅いっぱいに広げる方法を紹介します。

片側だけ画面いっぱいに広げることでアクセントを付けるデザインはよく見るので、覚えておくと便利かもしれません。

サンプル

サンプルページ

HTML

<section class="contents-section">
  <div class="contents-inner">
    <h2 class="contents-ttl">タイトル</h2>
    <div class="contents-box">
      <div class="contents-txt">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="contents-img">
        <p><img src="images/img.jpg" alt=""></p>
      </div>
    </div>
  </div>
</section>

CSS

.contents-section {
  padding: 50px 40px;
}
.contents-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.contents-ttl {
  font-size: 30px;
  font-weight: bold;
}
.contents-box {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.contents-txt {
  width: 50%;
  padding-right: 40px;
}
.contents-img {
  width: 50%;
}
.contents-img > p {
  width: 50vw;
  margin-right: calc((50vw – 100%) * -1);
}
.contents-img > p > img {
  width: 100%;
  border-radius: 60px 0 0 20px;
}

margin の値にマイナスの数値(ネガティブマージン)を指定することで、要素からはみ出して表示させることができます。
それを応用して、画像の親要素に margin-right: calc((50vw – 100%) * -1); を指定することで、画像部分が画面右端いっぱいまで広がるようにしています。