CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

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

あわせて読みたい
【CSS】親要素の幅を超えて子要素を画面いっぱい横幅100%にする方法
【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-rightmargin-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-rightmargin-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-leftpadding-rightに、30pxを足しています。

デモはこちら。

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

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

 

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

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

先ほどのrightleftを逆にすればいいだけです。

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

デモはこちら。

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

まとめ

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

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作