2022/3/7 （更新日: 2022/3/8）

画像だけインナー幅からはみ出して画面いっぱいに広げる方法

CSS

画像だけインナー幅（親要素）からはみ出して画面いっぱいにするにはどうすればいいの？

そんな疑問にお答えします。

文章はインナー内に配置しつつ、画像だけ画面幅いっぱいにする方法を紹介します。

別にこの方法は知らなくても画像をインナーから出せば同じことができますが、それだとコードは煩雑になります。

同じ親要素内に文章も画像もまとめて書ける今回のやり方の方が断然楽だし、コードもシンプルです。

ぜひ使ってみましょう。

1 画像だけインナー幅からはみ出して画面いっぱいに広げる
2 コード解説
3 calc(50% – 50vw)とは
4 水平スクロール対策
5 画像は画面幅いっぱいに広げたいが、内包する子要素は親要素（インナー）の幅を維持したい

画像だけインナー幅からはみ出して画面いっぱいに広げる

今回やりたいことはこれです。

インナー幅からはみ出して画面いっぱいにする

文章はインナー幅におさまっていながら、画像は画面幅いっぱいに広がっています。

これをひとつのコンテナー内だけで記述します。

コード解説

まずはコードを貼っておきます。

HTML

<div class="container">
  <div class="inner">
    <p>ほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃらら</p>
    <div class="picture">
      <img src="img/husky01.jpg">
    </div>
    <p>ほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃらら</p>
  </div>
</div>

CSS

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

p {
  margin-top: 30px;
}

.container {
  overflow: hidden;
}

.inner {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.picture {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 30px;
}

今回のポイントは

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

です。

この記述で画像を画面幅いっぱいに広げています。

ではなぜこう書くと画面幅いっぱいに広がるのか？

この点を見ていきましょう。

calc(50% – 50vw)とは

ネガティブマージンを求める式の解説図

calc(50% – 50vw)が一体何を求めているのかがわかれば、画面幅いっぱいに広がる現象が理解できます。

上はそれを理解するための補足図です。

見てわかるとおり

インナーの半分の幅が「50%」
全画面の半分の幅が「50vw」

となります。

つまり「50% – 50vw」の計算式は、インナーの外側のネガティブマージンの値を求めているのです。

本来marginとは要素間の余白を設けるために使います。

それは厳密にいえばポジティブマージン（正のマージン）です。

ですのでネガティブマージン（負のマージン）はそれとは逆の働きをします。

つまり要素間を詰めるという働きです。

要するに画像を左右に広げる働きをするということです。

ネガティブマージンの解説はこちら

【CSS】ネガティブマージンの使い方【初心者向け】

今回左右別々に

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

と記述していますが、まとめて書くと

margin: 0 calc(50% - 50vw);

となります。

どちらの書き方でもOKです。

水平スクロール対策

.container {
  overflow: hidden;
}

レスポンシブで確認するとわかるのですが、このままだとスクロールバーがあるページだと水平スクロールが起きます。

これはなぜ起こるかというと、ビューポートはスクロールバーの幅を含むからです。

ですのであらかじめ親要素に「overflow: hidden;」と指定しておきましょう。

画像は画面幅いっぱいに広げたいが、内包する子要素は親要素（インナー）の幅を維持したい

親要素を突き抜けて画面幅いっぱいに広げると、その中の子要素の配置の起点は画面の端になります。

これをインナー幅内にするためには、親要素の外側のpaddingを求める必要があります。

計算式は「padding: 0 calc(50vw – 50%);」です。

さきほどのmarginとは「%」と「vw」が逆になります。

内包する子要素は親要素（インナー）の幅を維持

上の図のコードは以下のとおりです。

HTML

<div class="container">
  <div class="inner">
    <p>ほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃらら</p>
    <div class="wrapper">
      <p class="text">インナー幅の中にいれる</p>
    </div>
    <p>ほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃらら</p>
  </div>
</div>

CSS

.container {
  overflow: hidden;
}

.inner {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.text {
  font-size: 24px;
  color: yellow;
}

.wrapper {
  width: 100vw;
  height: 100px;
  background: #00CC99;
  display: flex;
  align-items: center;
  margin: 30px calc(50% - 50vw); /* 画面幅いっぱいに広げる */
  padding: 0 calc(50vw - 50%); /* インナー幅を維持する */
}

以上となります。