【CSS】子要素を親要素から画面幅いっぱいにはみ出す方法

CSS

今回は、「子要素を親要素から画面幅いっぱいにはみ出す方法」について紹介します。

この方法を使うと、わざわざはみ出したいパーツを新しくコンテナで囲う必要がなくなるので便利です。

【CSS】子要素を親要素から画面幅いっぱいにはみ出す方法

デモサイトはこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

PCで確認してみてください。

HTML

<div class="parent">
    親要素の範囲です
    <div class="child">子要素の範囲です</div>
</div>

親要素と子要素を用意します。

CSS

.parent {
  max-width: 1000px;
  margin: 0 auto;
  background-color: #ffa500;
  text-align: center;
  height: 50px;
}

.parent .child {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background: #EECE34;
}

 

子要素をはみ出すには、childクラスに対してまず「width: 100vw;」を指定します。

これだけだと子要素の右側だけが親要素からはみ出してしまうので、「margin: calc(50% – 50vw);」で左右のずれを調整して真ん中に持ってきたら完成です。

まとめ

以上が、「子要素を親要素から画面幅いっぱいにはみ出す方法」でした。

関連記事:

大学生活でやるべきこと、やって良かったこと10選 【CSS/jQuery】左からハンバーガーメニューをアニメーションで表示させる方法 【CSS】calcを使ってカードリストを作る方法 画像の下に出来る余白の消し方について【WEB制作初心者向け】