くまだどうも、くまだです。
親要素のコンテナ幅からはみ出す方法についてのメモ。
親コンテナからはみ出す
よくあるやり方、calc(50% – 50vw)を使う方法。
<div class="wrapper">
<div class="inner">
<div class="box">コンテンツ</div>
</div>
</div>
.wrapper {
padding-top: 200px;
padding-bottom: 200px;
background-color: skyblue;
overflow: hidden;
}
.inner {
max-width: 1000px;
margin: auto;
}
.box {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
height: 500px;
background-color: orange;
}
inner幅よりコンテンツをはみ出して表示させています（オレンジ背景部分）。
50vwはビューポート（ウィンドウ）の横幅半分、%は親要素を基準としての割合半分です。
要素横幅半分からビューポート横幅半分を引いた分が左右にネガティブマージンとして適用されます。
paddingの左右にはcalc(50vw – 50%)で左右に広げた分だけ戻しています。
vwを使うとスクロールバーが発生してしまうので、wrapperにoverflow:hidden;を指定しています。
次に、calc(50% – 50cqi)を使ったやり方。
.wrapper {
padding-top: 200px;
padding-bottom: 200px;
background-color: skyblue;
container-type: inline-size;
}
.inner {
max-width: 1000px;
margin: auto;
}
.box {
margin-left: calc(50% - 50cqi);
margin-right: calc(50% - 50cqi);
padding-left: calc(50cqi - 50%);
padding-right: calc(50cqi - 50%);
height: 500px;
background-color: orange;
}
こちらもvwを使った場合と表示は同じです。
「cqi」はコンテナクエリで使える単位です。
コンテナタイプを指定した要素の横幅が1000pxだとすれば、100cqiは100%、500pxで50cqi、となります。
コンテナクエリは要素のサイズによってスタイルを変えることができます。
今回の場合、wrapperにはcontainer-type: inlie-size;を指定します。コンテナタイプを指定するとcqiが使えます。wrapperはスクロールバーを除いた画面幅全幅なのでそれにコンテナタイプを指定しているので、50cqiはスクロールバーを除いた画面横幅の半分になります。
あとはvwを使った場合と考え方は同じです。
コンテナタイプを指定したwrapperを基準にしているので、vwのときのようにoverflow:hidden;を指定しなくてもいいです。
ここまで読んでくださりありがとうございました。