全幅のセクション背景色

概要

近年のWebデザインでは余白をゆったり取り、セクションの区切りで交互に、あるいは特定のセクションのみ幅いっぱいまで背景色で塗りつぶすようにデザインされるケースが増えている。
背景色エリアはブラウザ幅いっぱいまで広がるが、その中のコンテンツ領域については一定の幅で固定されるようにすることが大半であるため、どのようにして背景色エリアとコンテンツエリアをコーデイングしたら効率が良いか？　という問題が生じる。
構造的には大きく分けて次の2パータンが考えられる。

  1. セクションごとにコンテナ枠を背景枠の内側に配置し、外側の背景枠のみ全幅とする
  2. 1つのコンテナ枠の中にセクションを縦積み配置し、内側からコンテナを超えて背景だけ広がる

背景枠の中にコンテナ枠を入れるパターン

1の方法は幅を固定するコンテナ枠が各セクションの内側にあるので、背景色を幅いっぱいまで広げること自体は難しくないが、セクションごとに必ず背景色とコンテナ用で二重の枠が必要となるため、マークアップが少々煩わしいのが難点。
ただ、この方法は特別なテクニックも必要なく素直に作れる点と、セクションごとに固定するコンテナの幅がバラバラであるようなデザインにも簡単に対応できる点がメリットとなる。

<section class="section _bg">
　<div class="container">
　　<h2 class="section__ttl">ハワイの青い空</h2>
　　<p class="section__txt">この文章はダミーです。</p>
　</div>
</section>
.container {  /* コンテンツ最大幅を固定 */
　max-width: 1040px;
　margin: 0 auto;
　padding: 0 20px;
}
.section {  /* 外枠sectionはwidth:auto = 全幅 */
　padding-top: 50px;
　padding-bottom: 50px;
}
.section._bg {  /* 背景色をつける */
　background: #cdecf0;
}

背景枠の中にコンテナ枠を入れるパターン

2の方法は、サイト全体でコンテンツの固定幅が原則一律で、セクションが縦積みで配置される基本構造の中で、一部のセクションのみ背景色を幅いっぱいまで広げたいものが混ざるようなケースで重宝する。この手法は「セクション内の見出しエリア背景だけ幅いっぱいまで広げたい」といった、部分的にコンテナ枠を超えて全幅にしたいケースでも使える。
左右のネガティブマージンで要素を外側に広げるテクニックの応用で、その際に左右のmarginをcalc ( 50% – 50vw )とすることがポイント。
左側だけ考えると、margin-left: 50%でまず親要素の半分だけ余白を付けてコンテンツの開始位置を中央にずらしたあと、margin-left: -50vwで画面幅の半分だけ戻すという調整をしている。これを右側も同様に行うことで、子要素を画面中央から左右に画面幅いっぱいまで引き伸ばす状態を実現している。

<div class="container">
　<section class="section _bg">
　　<h2 class="section__ttl">常夏の楽園</h2>
　　<p class="section__txt">この文章はダミーです。</p>
　</section>
</div>
.container {  /* 一律でページ全体のコンテンツ最大幅を固定 */
　max-width: 1040px;
　margin: 0 auto;
　padding: 0 20px;
}
.section {
　padding-top: 50px;
　padding-bottom: 50px;
}
.section._bg {  /* 全幅背景 */
　margin-left: calc(50% - 50vw);
　margin-right: calc(50% - 50vw);
　background: #cdecf0;
}
inserted by FC2 system