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

    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>


    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%);
    }


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

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