【CSS】左右いっぱいに広がるデザインを作る

Webデザインでは、コンテンツの幅を画面いっぱいに広げたい場合があります。
例えば、背景画像やセクション全体をブラウザの端まで伸ばしたいときに便利なテクニックです。

1. .over-width クラスの役割

.over-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

このCSSを適用すると、要素の左右のマージンが画面いっぱいに広がるようになります。

2. calc(50% - 50vw) の意味

この計算式を分解すると、

• 50% → 親要素の幅の半分
• 50vw → ビューポートの幅の半分

通常、コンテンツは親要素の width: 100% の範囲内に収まります。
しかし、親要素の幅が max-width などで制限されていると、画面全体に広がりません。

そこで calc(50% - 50vw) を使うことで、

• 親要素の中央を基準にしつつ
• ビューポート（画面幅）の中央に揃え
• 結果として、親要素の制約を超えて画面いっぱいに広がる

という効果が得られます。

3. .over-width の活用例

3-1. 背景を画面いっぱいに広げる

<section class="over-width" style="background-color: #3498db; color: white; padding: 20px; text-align: center;">
    画面いっぱいに広がるセクション
</section>

3-2. フル幅の画像を表示する

<img src="example.jpg" alt="フル幅画像" class="over-width">

これにより、画像が画面いっぱいに広がります。

4. まとめ

.over-width を使うことで、コンテンツを親要素の幅を超えて画面いっぱいに広げることができます。

ポイント

• margin-left: calc(50% - 50vw);
• margin-right: calc(50% - 50vw);
• ビューポート全体に広げるのに最適

このテクニックを活用して、ダイナミックなWebデザインを実現しましょう！