[CSS] [HTML] 画面幅いっぱいに要素を広げて配置するコード

HTML

[code language=”html”]

<div class="width-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>
[/code]

CSS

[code language=”css”]

body {
overflow-x: hidden;
}
img {
width: 100%;
height: auto;
}
.width-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%);
}
[/code]

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

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