子要素を親要素よりはみ出して表示させるためのCSS

毎回調べてるので備忘録として記録します。
ページ全体に余白を持たせてる状態で、一部だけ親要素をはみ出して画面いっぱい横幅（全幅）にしたい時などに使用します。

上記のサンプル画像では、写真だけ全幅になっているって感じです。
こんな感じのものをコーディングしたい時に！

子要素よりも大きく表示させる

実際のコードはこちら

ポイントは２つだけ。

はみ出させたい子要素に、

• margin: 0 calc(50% – 50vw);
• width: 100vw;

を指定すること。

これだけではみ出させたい子要素が全幅になります。
（幅の大きさはご自身の希望に調整して下さいね）

サンプルコード

.test img{
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

calc()で何をやっているか？

marginについているcalcで何をやっているのかというと、
「子要素の横幅半分を右にずらして、画面の半分の幅を左に戻している」ということをやっています。
これで全幅ぴったりにレイアウトされているということですね。

自分も忘れないようにここに残しておきます！