【CSS】片側だけ親要素を超えて画面幅いっぱいに広げる方法

画要素の片側だけ画面幅いっぱいに広げる方法ってある？

要素を画面幅いっぱいにするのはよくあります。

しかし、片方だけ横幅いっぱいにしたい場合は、どうしたらいいでしょうか？

今回はいくつかのパターンに分けて、片側の要素だけ画面幅いっぱいに広げる方法を解説していきます。

ただし、基本となる要素がど真ん中にある場合のみです。

また、親要素の幅を超えて子要素を画面いっぱい横幅100%にする方法については、以下の記事を参照下さい（実務ではこっちの方がよく使います）

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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

片側の要素だけと言っても、いくつかのパターンがあります。

基本となるHTMLはこちらです。

<div class="container">
  <div class="inner">
    <div>片側だけ横幅いっぱいにしたい要素</div>
  </div>
</div>

レイアウトのためのCSSはこちらです。

/* レイアウトのためのCSS */
.container {
  background-color: #ccc;
  height: 300px;
  width: 100%;
}
.inner {
  background-color: #b2d8ff;
  margin-inline: auto;
  max-width: 400px;
  padding-bottom: 50px;
  padding-top: 50px;
  width: 100%;
}
img {
  display: block;
  height: 200px;
  /* ↓高さを指定する場合、これがないと画像が潰れる */
  object-fit: cover;
  width: 100%;
}
.box {
  align-items: center;
  background-color: #3cb371;
  display: flex;
  font-size: 20px;
  height: 200px;
  justify-content: center;
  text-align: center;
}

これはレイアウトのためのCSSで、今回の本題とはほぼ関係ありませんが、imgタグのobject-fit: cover;だけ書くのを忘れないように注意しましょう。

画像によっては、潰れてるのに気が付きにくいものがあるかも知れないので。

ちなみに、今回使用する画像はこちらです。

画像の右側だけ右端いっぱい

まずは、画像の場合です。

HTMLはこちら。

<div class="container">
  <div class="inner">
    <div class="image">
      <img src="画像パス" alt="" />
    </div>
  </div>
</div>

先ほどのCSSのままだと、こちらになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

灰色の部分は.containerのdivタグで、両端の画面幅いっぱいです。

水色の部分は.innerのidvタグで、この中に画像が収まっています。

普通の書き方では、この画像が.innerの外には出ません。

この画像を右側だけ右端いっぱいにするには、以下のCSSを書きます。

/* 画像を右側いっぱい */
.image {
  margin-right: calc(50% - 50vw);
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

右上の『EDIT ON CODEPEN』をクリックすると別画面で大きく表示されるので、分かりやすいと思います。

画像の左側だけ左端いっぱい

次は、画像を左側だけ左端いっぱいにします。

これは先ほどのmargin-rightをmargin-leftにすればいいだけです。

/* 画像を左側いっぱい */
.image {
  margin-left: calc(50% - 50vw);
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

要素を右端いっぱい

次は、画像ではない要素です。

これは、基本も片側いっぱいにするのも画像のときと同じです。

HTMLはこちら。

<div class="container">
  <div class="inner">
    <div class="box">
      要素を右側いっぱい
    </div>
  </div>
</div>

CSSはこちら。

/* 要素を右側いっぱい */
.box {
  margin-right: calc(50% - 50vw);
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

画像のときとコードも見た目も全く同じです（画像は上下が切れましたが）

要素を左端いっぱい

ここまで来ればもう分かると思いますが、左端いっぱいにするには、先ほどのコードでmargin-rightをmargin-leftにすればOKです。

/* 要素を左側いっぱい */
.box {
  margin-left: calc(50% - 50vw);
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

要素の背景色のみ右端いっぱい

先ほどは要素丸ごと片側いっぱいにしましたが、今度は背景色のみ片側いっぱいにします。

CSSはこちらです。

/* 要素の背景色のみ右端いっぱい */
.box {
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
}

今度はpaddingもあります。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

先ほどと違い、背景色は右側いっぱいになっていますが、テキストは親要素内に収まっています。

また、これだと親要素の両端ピッタリになっているので、少し余白が欲しい場合は以下のようにします。

/* 要素の背景色のみ右端いっぱい */
.box {
  margin-right: calc(50% - 50vw);
  padding-left: 30px;
  padding-right: calc(50vw - 50% + 30px);
}

padding-leftとpadding-rightに、30pxを足しています。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

こっちの方がいい感じかと思います。

要素の背景色のみ左端いっぱい

ここまで来れば、これは簡単ですね。

先ほどのrightとleftを逆にすればいいだけです。

/* 要素の背景色のみ左端いっぱい */
.box {
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回は、要素の片側だけ画面幅いっぱいに広げる方法を解説してきました。

実務でもたまにあり、地味に注意が必要だったりするので、出来るようになっておくといいかと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！