【CSS】親要素の幅を突き抜けたい

コーディング時にコンテンツ幅を超えた要素があると、HTML構成を分けなくてはいけないの？と困ることがありますよね。
そんな時にCSSのみで表現できる手法を紹介します。

---

親要素を突き抜ける方法

本来、要素の幅（width）の最大値は親要素を基準としているので、最大値は親要素の幅と等しくなります。
もちろん”px”や”%”などで親要素よりも大きな値を指定することは出来ますが、様々な画面幅を網羅する時、単純に大きな値を指定しただけでは位置調整が困難になります。

例えばコンテンツ幅である親要素の幅を超えて”画面いっぱい”にしたい時や、”左右どちらかにはみ出したい時”などはもっと効果的に子要素を配置することができます。

画面いっぱいにする

親要素の幅を超えて画面いっぱいにする方法です。
下記のソースをご覧いただくと、2つ目の要素が画面いっぱいに広がっています。

See the Pen Untitled by あばたつお (@xyrdlflf-the-encoder) on CodePen.

解説

下記のCSSプロパティを子要素に指定すると簡単に親要素を超えて画面いっぱいにすることができます。

width: 100vw;
margin: 0 calc(50% – 50vw);

それぞれの効果は下記となります。

・width: 100vw;

　widthを画面幅いっぱいで指定します。

・margin: 0 calc(50% – 50vw);

　親要素幅の半分の値から、画面幅の半分の値を除算することで、画面幅いっぱいに広げるためのマイナスマージンを指定することができます。これにより子要素を画面幅ちょうどぴったりまで引き伸ばすことができます。

左右どちらかだけ

次は親要素を超えて画面の左右どちらかに引き伸ばす方法です。
下記のソースをご覧いただくと左右どちらかに引き伸ばされているのがわかると思います。

See the Pen Untitled by あばたつお (@xyrdlflf-the-encoder) on CodePen.

解説

下記のCSSプロパティを子要素に指定すると親要素を超えて右方向側画面いっぱいに引き伸ばすことができます。

margin-right: calc(50% – 50vw);

左方向側に引き伸ばす場合はこちら。

margin-right: calc(50% – 50vw);

画面いっぱいにする場合と同じで、引き伸ばしに必要な分だけマイナスマージンを設定しています。

基本このような時の子要素はブロック要素を想定していますので、widthを設定しなくても自動で端まで伸びてくれます。

※HTML構成の都合上widthを設定する場合は100vwなど最大値を設定することが多いですが、片側だけに引き伸ばそうとすると、画面幅を突き抜けてしまうことがあります。
その場合は祖先要素にoverflow-x:hidden; やoverflow-x: clip; を設定するなどして画面幅以上に要素が突き抜けないようにしましょう。

---

まとめ

• 画面幅いっぱいにしたい時はwidth: 100vw; margin: 0 calc(50% – 50vw);を使おう。
• 左右どちらかに引き伸ばしたい時はmargin-right: calc(50% – 50vw);もしくはmargin-left: calc(50% – 50vw);を使おう。
• 画面幅以上に突き抜ける幅を設定する時は祖先要素にoverflow-x:hidden; やoverflow-x: clipを設定しよう。