通常は、サイトの左右にスペースがある状態にしたいけれど、特定のセクションのみ横いっぱいに広げたいこと、ありませんか?

今回は、特定のセクションのみ左右のスペースをなしにする方法を紹介します。

例えば、次の画像のレイアウトがあるとします。

image2

このレイアウトは、左右に margin を設定しています。

このレイアウトで 2 番のみ横いっぱいに広げてみます。

image3

特定のセクションを横いっぱいにするには、CSS でmargin: 0 calc(50% - 50vw);を指定します。

ブラウザで確認すると、

image4

2 番のみ横いっぱいに広がりました。

margin-left、margin-right ともにセクションの横幅(50%)からサイト全体の横幅(50vw)を引くことで、セクションのスペースがなくなりました。

image5

Google マップなど埋め込むときに役立ちますので、ぜひ活用してみてください。

ブログ一覧