【CSS】子要素を親要素からはみ出して画面いっぱいに表示する

【CSS】子要素を親要素からはみ出して画面いっぱいに表示する

こんにちは、ユイトです(@mikiprogram )

子要素を親要素(インナー幅)からはみ出させて、画面いっぱいに表示したり、
片側だけ画面いっぱいに表示する方法を学びました。

実装方法は色々あると思いますが、今回はcalc関数を使って実装する方法と注意点を書いていきます。

※2022/03/29追記
overflow:hidden;を指定した要素内では、position:sticky;がうまく機能しないことを書きました。
追記箇所までスクロールする↓

目次

今回のポイント

先に今回のポイントを書きます。

  • width:100vwと左右どちらかもしくは両方のmarginにcacl(50% - 50vw)指定
  • vwはスクロールバーの幅も含むため、横スクロールに注意

ポイントは以上です。
以下より詳しく書いていきます↓

完成サンプルとコード

今回実装するサンプルとコードを書いていきます。

コードに関して、画面幅いっぱいにするためや注意点を記述している行には、ハイライト表示させています。

完成サンプル

CodeSandBoxを使って、サンプルを作成しました↓

【CSS】子要素を親要素からはみ出して画面いっぱいに表示する

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次
閉じる