カテゴリー
お問い合わせ

【CSS】たった2行！親要素のpaddingを無視して子要素を画面幅いっぱい（100vw）に広げる方法

HTML/CSS
目次

Webサイトのコーディングをしていると、「全体は中央寄せで左右に余白を持たせているけど、この背景や画像だけは画面幅いっぱいに広げたい」というデザインによく遭遇します。

昔は position: absolute を駆使したり、HTMLの構造自体を分けたりと面倒な対応が必要でしたが、現代のCSSではたった2行のコードでスマートに解決できます！

今回は、絶対に役立つ calc() と vw を組み合わせた「要素を画面幅いっぱいに広げるテクニック」をデモと共にご紹介します！

デモ動作

See the Pen 親要素のpaddingを無視！子要素を画面幅いっぱいに広げるCSS by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>画面幅いっぱいに広げるデモ</h2>
  
  <!-- 親要素（幅制限あり・左右paddingあり） -->
  <div class="p-article-box">
    <p>ここは通常のコンテンツエリアです。親要素には padding が設定されているため、左右に余白があります。</p>
    
    <!-- 画面幅いっぱいに広げたい対象の要素 -->
    <div class="c-full-width-box">
      <p>この要素だけ、親のpaddingや幅制限を無視して画面幅いっぱいに広がります！</p>
    </div>

    <p>通常のコンテンツエリアに戻りました。HTMLの構造を変えずに、一部だけを広げられるのがこのテクニックの最大のメリットです。</p>
  </div>
</div>

【CSS】

.l-wrap {
  padding: 40px 0;
  margin: 0 auto;
  text-align: center;
  color: #3e3e3e;
  overflow-x: hidden; /* 横スクロールバーを出さないための安全対策 */
}
h2 { 
  font-size: 16px;
  color: #1bb4d4;
  margin-bottom: 30px;
}
p {
  font-size: 16px;
}

/* =========================================
   親要素（ブログの記事エリアなどを想定）
========================================= */
.p-article-box {
  background-color: #fff;
  max-width: 600px;
  margin: 0 auto;
  border: 2px dashed #ccc;
  text-align: left;
  line-height: 1.8;
  
  /* 40pxの余白を設定 */
  padding: 40px; 
}

/* =========================================
   画面幅いっぱいに広げる子要素
========================================= */
.c-full-width-box {
  background-color: #1bb4d4;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
  font-weight: bold;
  margin-block: 40px;

  /* 💡画面幅いっぱいに広げるための、たった2行のコード！ */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

コードの解説・仕組み

なぜこの数式で画面幅いっぱいになるの？

/* 💡画面幅いっぱいに広げるための、たった2行のコード！ */
width: 100vw;
margin-inline: calc(50% - 50vw);

肝となるのは margin-inline: calc(50% - 50vw); という計算式です。
（※ margin-inline は左右のマージン margin-left と margin-right を一括で指定できる便利なプロパティです）

  • 50% ：現在の要素（親要素）の幅の半分の距離
  • 50vw ：ブラウザの画面幅（ビューポート）の半分の距離

これを 50% - 50vw と引き算することで、「親要素の中心から、画面の端までの距離」をマイナスのマージン（ネガティブマージン）として左右に設定しています。

これにより、親要素にどんな幅制限（max-width）や余白（padding）が設定されていても、常に画面の端と端にピタッとくっつくように要素が広がるという仕組みです！

まとめ

今回は、親要素のスタイルに依存せず、特定の要素だけを画面幅いっぱいに広げるCSSテクニックをご紹介しました。

この方法を使えば、HTMLを要素ごとに細かく分割する必要がなくなり、WordPressなどのCMSから出力された記事コンテンツの中にも、簡単に画面全幅のダイナミックなレイアウトを組み込むことができます。

calc() や vw、そして margin-inline を組み合わせたモダンなアプローチなので、ぜひご自身のコーディングの引き出しに加えてみてください！

Prev
Next

関連記事