幅固定のコンテンツ内で画面幅いっぱいに要素を広げて配置する

コンテンツの幅固定で左右中央位置に配置された要素内で、画面幅いっぱいに要素を広げて配置する方法を試してみます。

サンプルコード

以下のようなHTMLで、.contentsが固定幅の左右中央配置、その中の.full-widthを画面幅いっぱいに広げてみます。

HTML

<div class="contents">
	<div class="full-width">
		<p>ここの内容を画面幅100%にします。</p>
	</div>
	<div class="full-width">
		<img src="./image.jpg">
	</div>
</div>

まずは対応前のCSSです。
.contentsは最大幅1000pxの中央配置、imgは幅100%にしています。

CSS

img {
	width: 100%;
	height: auto;
}
.contents {
	max-width: 1000px;
	margin: auto;
}

この場合は.full-widthは親要素の.contentsに収まる幅になります。
対応前のデモページ

次に対応方法ですが、calc()とvwを使います。

CSS

body {
	overflow-x: hidden;
}
img {
	width: 100%;
	height: auto;
}
.contents {
	max-width: 1000px;
	margin: auto;
}
.full-width {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

12～15行目で.contentsの左右の余白分だけネガティブマージンを使って.full-widthを広げています。
横スクロールバーが表示されることがあるので、1～3行目でbodyにoverflow-x: hidden を指定しています。
対応後のデモページ

注意点として、vwがスクロールバーを含まない幅のため、厳密には画面幅より少しだけ大きくなってしまいます。
そのため、使用するデザインなどによっては注意が必要です。

先ほどの例はdivに対して設定しましたが、imgに対しても設定できる別の方法も試してみます。

HTML

<div class="contents">
	<div class="full-width">
		<p>ここの内容を画面幅100%にします。</p>
	</div>
	<div class="full-width">
		<img src="./image.jpg">
	</div>
	<img src="./image.jpg" class="full-img">
</div>

CSS

body {
	overflow-x: hidden;
}
img {
	width: 100%;
	height: auto;
}
.contents {
	max-width: 1000px;
	margin: auto;
}
.full-width {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}
.full-img {
	width: 100vw;
	height: auto;
	margin-left: calc(-50vw + 50%);
}

基本的に使っている内容は先ほどと同じですが、width: 100vwで要素自体を画面幅いっぱいに広げた後でmargin-leftで中央位置に配置されるように調整しています。
ネガティブマージンで左右に広げる方法はimgには使えませんが、こちらの方法はimgに直接指定する形でも使用できます。
対応後のデモページ2

注意点も先ほどと同じで、スクロールバー分だけ画面幅より大きくなってしまうのでご注意ください。
　

【参考サイト】

• コンテナからの解放。