Created:2026/03/04
Updated:2026/03/04
Author:
Takeshi Takatsudo

ネガティブマージンによる拡張 + パディングで戻す

問題

padding が設定されたコンテナの内部では、すべての子要素がコンテナの padding を尊重し、端から内側に配置されます。しかし、特定のセクションの背景色や画像、ボーダーをコンテナの端まで広げたい場合があります。テキストコンテンツはページの他の部分と揃えたまま、視覚的にはコンテナからはみ出させたいケースです。AIエージェントはこのような場面で、余分なラッパー div を追加したり、要素をコンテナの外に出したり、100vw ハックを使って水平スクロールバーを発生させたりしがちです。

解決方法

負の水平マージンで要素をコンテナの padding の外側に引き出し、同じ値の正の padding でコンテンツを元の位置に戻します：

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
}

.full-bleed-section {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  background: hsl(220 80% 96%);
}

負のマージンと正のパディングは必ず同じ値にします。背景は広がりますが、テキストは元の位置のまま保たれます。

ネガティブマージンによる拡張と通常コンテンツの比較

論理プロパティの使用

国際化対応を向上させるために、物理的な left/right の代わりに論理プロパティを使います：

.full-bleed-section {
  margin-inline: -24px;
  padding-inline: 24px;
  background: hsl(220 80% 96%);
}

レスポンシブ対応

コンテナの padding がブレークポイントごとに変わる場合、拡張の値もそれに合わせます：

.container {
  padding-inline: 16px;
}

.full-bleed-section {
  margin-inline: -16px;
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 32px;
  }
  .full-bleed-section {
    margin-inline: -32px;
    padding-inline: 32px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 48px;
  }
  .full-bleed-section {
    margin-inline: -48px;
    padding-inline: 48px;
  }
}

レスポンシブ対応の全幅拡張（ビューポート切り替え）

重要なルール

負のマージンは親コンテナの padding を絶対に超えてはいけません。超えるとページの端からはみ出し、水平スクロールバーが発生します。

/* The container has 24px padding */
.container {
  padding-inline: 24px;
}

/* GOOD — matches the container padding */
.full-bleed {
  margin-inline: -24px;
  padding-inline: 24px;
}

/* BAD — exceeds the container padding, causes overflow */
.full-bleed-broken {
  margin-inline: -48px;
  padding-inline: 48px;
}

AIがよくやるミス

全幅表示に width: 100vw を使う — ページに縦スクロールバーがある場合、100vw はスクロールバーの幅を含むため水平スクロールバーが発生します。ネガティブマージンのテクニックならこの問題を完全に回避できます。
padding とマージンの値を一致させない — margin-inline: -32px を設定しても padding-inline: 32px を忘れると、テキストコンテンツが左右にずれてアライメントが崩れます。
コンテナの padding を超える値を指定する — 負のマージンは親の padding の範囲までしか引き出せません。それ以上の値を指定するとオーバーフローが発生します。
親要素に overflow: hidden を使う — 拡張した背景がクリップされます。親要素が別の理由で overflow: hidden を必要とする場合は、中間のラッパーコンテナを使いましょう。

使用場面

padding が設定された記事レイアウト内でのハイライトセクションやコールアウトブロック
幅が制限されたコンテンツコンテナ内での全幅背景色や画像
テキストの整列を保ちつつ、視覚的に目立たせたいセクション
シングルカラムレイアウト内での交互の背景帯

問題​

解決方法​

論理プロパティの使用​

レスポンシブ対応​

重要なルール​

AIがよくやるミス​

使用場面​

問題