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

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

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

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

目次

今回のポイント

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

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


以下より詳しく書いていきます↓

完成サンプルとコード

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

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

完成サンプル

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

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

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

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