【初心者必見】たった2行！親要素を無視して画面幅いっぱいまで要素をはみ出させる方法

どうも7noteです。いままでのルールを覆すようなとっておきの必殺技を紹介します。

position指定等をしないと、基本的には子要素が親要素をはみ出すことはありません。
なのでこんなデザインは難しい。。。とおもいますが1行で解決できます。

親要素をはみ出して幅いっぱいになるデザイン

解決方法

index.html

<div class="oya">
  <div>コンテンツ1</div>
  <div class="wide">コンテンツ2</div>
  <div>コンテンツ3</div>
  <div>コンテンツ4</div>
</div>

style.css

.oya {
  max-width: 1000px; /* 基本は可変。最大横幅を1000pxに指定 */
  margin: 0 auto;    /* 左右中央に配置 */
  background: #DDD;  /* 背景色をグレーに指定 */
}

.oya > div:nth-child(2n){
  background: #fAA;  /* 偶数番目だけ背景色をピンクにする */
}

.oya .wide {
  margin: 0 calc(50% - 50vw);  /* 画面幅いっぱいにはみ出させるためのネガティブマージン */
  width: 100vw;                /* 幅を画面幅いっぱいに指定 */
}

解説

親要素には幅を指定しておきます。
そして、ネガティブマージンを取ります。計算式はcalc(50% - 50vw)。
ここの50%は親要素の半分という意味で、50vwが画面幅の半分。計算すると画面の端から親要素の端までの長さになります。
これで「子要素の幅 + ネガティブマージン = 画面幅いっぱい」ということになります。

まとめ

初めてこの方法を知った時はそれは衝撃でした。これまでわざわざ親要素でない要素にたいして左右の余白をautomatrgin: 0 auto；と横幅のサイズ指定をしていましたから。
ですがこの方法であれば、基準の幅を指定しつつ、はみ出す要素にだけ追加でCSSを書けばいとも簡単に「親要素からはみ出すようなコンテンツ」を作ることができます。

毎日開発をやっていると突然これまでの考え方や作り方が一新されるような作り方に出会う瞬間があります。
その経験の数が、スキルの差やスピードに直結するんだなと思います。
日々精進あるのみですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ