# 左右片方だけinner幅を超えて横幅いっぱいにするのCSS実装

> 親のpaddingやmax-widthに制限されず、片側だけ画面端まで背景や装飾を広げたい時に使えるテクニックです。主にカードやセクションの背景装飾などで活躍します。

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/full-bleed-side/

## HTML

```html
<section class="container">
  <div class="full-bleed-right">
    <h2>見出し</h2>
    <p>この部分だけ右側が画面端まで背景色で広がります。</p>
  </div>
</section>
```

## CSS

```css
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.full-bleed-right {
  margin-right: calc(50% - 50vw);
  padding: 1.5rem;
  background: #f3ecd9;
  border-radius: 0.75rem;
}
```

## 仕組みの解説

鍵は margin-right: calc(50% - 50vw) の1行です。50% は「親要素の幅の半分」、50vw は「画面幅の半分」なので、その差し引きぶんだけネガティブマージンが生まれ、要素が親のコンテナを突き破って画面端まで届きます。コンテナのmax-widthを変えても自動で追従するため、マジックナンバーが不要です。

## 実装のポイント

左右どちらでも応用可能。margin-left: calc(50% - 50vw); で左側だけ広げることもできます。縦スクロールバーの幅ぶん横スクロールが出る場合は、bodyにoverflow-x: clipを検討してください。

## AIに依頼するときの文例

中央寄せのコンテナ内で、特定のセクションだけ右側を画面端まで広げるフルブリードレイアウトを作ってください。margin-right: calc(50% - 50vw)を使い、コンテナ幅に依存しない作りにしてください。

## 使っているプロパティ

- [margin](https://www.css-dictionary.com/property/margin.md)
- [max-width](https://www.css-dictionary.com/property/max-width.md)
- [padding](https://www.css-dictionary.com/property/padding.md)