要素を画面幅いっぱいにするのはよくあります。
しかし、片方だけ横幅いっぱいにしたい場合は、どうしたらいいでしょうか？
今回はいくつかのパターンに分けて、片側の要素だけ画面幅いっぱいに広げる方法を解説していきます。
ただし、基本となる要素がど真ん中にある場合のみです。
また、親要素の幅を超えて子要素を画面いっぱい横幅100%にする方法については、以下の記事を参照下さい（実務ではこっちの方がよく使います）
-
【CSS】親要素の幅を超えて子要素を画面いっぱい横幅100%にする方法
続きを見る
（有料になっていたらすいません🙇♂️）
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.
まとめ
今回は、要素の片側だけ画面幅いっぱいに広げる方法を解説してきました。
実務でもたまにあり、地味に注意が必要だったりするので、出来るようになっておくといいかと思います。
以上になります。
