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

【CSS】子要素を親要素からはみ出して画面いっぱいに表示する
  • URLをコピーしました!

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

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

2024年01月22日追記
違うやり方で実装する方法を記事にしました↓

目次

今回のポイント

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

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


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

完成サンプルとコード

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

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

完成サンプル

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

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