子要素を親要素の枠からはみ出させるという表現は、凝ったレイアウトのWebサイトだとよく使われています。ただ、これを実装するのって地味～にめんどくさいんですよね。

今回紹介するのは、CSSのみで画面端まで子要素を広げる方法です。

今回作るもの

先に完成品から紹介します。

See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.

子要素の背景部分は親要素からはみ出させて画面端まで広げつつ、中のテキストは親要素の範囲内に収めています。

この後それぞれのCSSを紹介しますが、HTMLはこのようになっています。

<div class="container">
	<div class="content left">LEFT</div>
	<div class="content right">RIGHT</div>
	<div class="content lr">LEFT + RIGHT</div>
</div>

親要素のcontainerの中に、子要素のcontentを配置しているだけの超シンプルな構成です。

それではCSSを紹介します。

左端まで広げる方法

大切なのは14～16行目です。

.container{
	margin: 0 auto;
	padding: 20px 0;
	width: 60%;
	background: #ccc;
}
.content{
	margin: 30px 0;
	padding: 20px 0;
	background: #000;
	color: #fff;
}
.left{
	margin-left: calc(50% - 50vw);
	padding-left: calc(50vw - 50% + 8px);
	padding-right: 8px;
}

vwを使用しているので、画面サイズに影響されずに常に端まで背景領域が広がります。レスポンシブ対応のWebサイトでも安心して使えますね。

ちなみに表示結果を開発者ツールで見ると、このような配置になっています。

左側の余白が左端まで伸びつつ、文字配置される領域は親要素の範囲内に収まっています。

右端まで広げる方法

marginとpaddingを先程と逆にするだけです。

.right{
	margin-right: calc(50% - 50vw);
	padding-left: 8px;
	padding-right: calc(50vw - 50% + 8px);
}

左右の端まで広げる方法

左と右を合わせただけです。

.lr{
	margin: 30px calc(50% - 50vw);
	padding: 20px calc(50vw - 50% + 8px);
}

最後に

ほんとはもう少し記述についての解説も書こうかと思ったんですが、地味に説明が難しいのでパス。数値を変えたりして挙動の変化を見れば理解できると思うので、みなさん頑張ってください（説明放棄）

というかcalc()ってマジで万能だなぁ…