親要素（コンテンツ幅）を無視して画面いっぱいに広げるCSSテクニック

全幅（フルワイド）表示の決定版：サイドバーの有無による2つの正解

Webデザインでよく使われる「全幅表示」。しかし、ネットで見つけたコードをそのまま使うと、「サイドバーがある場合に大きくズレてしまう」というトラブルがよく起こります。

今回は、サイトのレイアウトに合わせて確実に「端から端まで」広げる2つの手法を、具体的なコード例とともに解説します。

1. 【サイドバーなし】画面中央を基準にする方法

1カラムのサイトや、ランディングページなどで有効な手法です。ブラウザの横幅（100vw）を基準にします。

■ HTMLコード

<div class="full-width-vw">
    <div class="inner-content">
        <p>ここはサイドバーがないページで完璧に全幅になります。</p>
    </div>
</div>

■ CSSコード

.full-width-vw {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e3f2fd; /* デモ用 */
    padding: 40px 0;
}
.inner-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

2. 【サイドバーあり】計算式でズレを補正する方法

サイドバーがある場合、vw を使うと記事エリアの「左端」を基準にしてしまうため、画面全体の中央からズレてしまいます。

この場合の正解は、「leftの基準点にサイドバーの半分の幅を足して、中心を中央へ戻す」という計算式を用いた方法です。

■ HTMLコード

<div class="full-bleed-sidebar">
	<p>サイドバーがあってもズレない「全幅」セクションです。</p>
</div>

■ CSSコード

.full-bleed-sidebar {
    width: 100vw;
    position: relative;
    /* サイドバーの幅の半分（例: 300pxなら150px）を加算して補正 */
    left: calc(50% + 150px); 
    transform: translateX(-50%);
    background-color: #fff9c4;
    padding: 40px 20px;
}

/* モバイル対応：サイドバーが消えるスマホでは中央に戻す */
@media (max-width: 768px) {
    .full-bleed-sidebar {
        left: 50%;
        width: 100vw;
    }
}

まとめ：どちらを使うべきかの判断基準

実装する前に、あなたのサイトの構造を確認しましょう。