【CSS】幅(width)固定の親要素タグ内の子要素タグ幅を親要素幅より大きく(width=100%)する方法｜DAD UNION

CSSで幅(width)固定の親要素タグ内の子要素タグ幅を親要素幅より大きく(width=100%)する方法をご紹介します。
webページでマークアップをしてるとたまに固定幅の親要素タグ内で親要素より大きい幅の子要素エリアをマークアップしたい時があります。
親要素タグ外に出すのも一つの方法ですが、そのまま親要素タグ内で子要素タグ幅を親要素幅より大きく表示させたい時に使えます。

Contents

幅(width)固定の親要素タグ内の子要素タグ幅を親要素幅より大きく(width=100%)する親要素（.oyayoso）と子要素（.koyoso）のCSSの記述
幅(width)固定の親要素タグ内の子要素タグ幅を親要素幅より大きく(width=100%)するHTML記述
“幅width固定の親要素タグの子要素タグ幅を親要素より大きく（width=100％）するデモページ

幅(width)固定の親要素タグ内の子要素タグ幅を親要素幅より大きく(width=100%)する親要素（.oyayoso）と子要素（.koyoso）のCSSの記述

※親要素（.oyayoso）の幅（width: 400px）を指定します。子要素（.koyoso）の幅をビューポートパーセンテージを指定してます。必要に応じて書き換えてください。

<style>
body{
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  padding: 0;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  font-size: 24px;
}
.oyayoso{
  width: 400px;
  background-color: #cccccc;
  text-align: center;
  padding: 40px 0;
  margin: 0 auto;
  position: relative;
}
.koyoso{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 20px -50vw 0 -50vw;
  background-color: #f4ce47;
}
</style>

幅(width)固定の親要素タグ内の子要素タグ幅を親要素幅より大きく(width=100%)するHTML記述

※親要素（class=”koyoso”）タグ内に子要素（class=”koyoso”）タグを用意します。

<h1>親要素タグ(width:400px)エリア内に子要素タグ(width:100%)を入れて、親要素幅より子要素幅を大きく表示してます。</h1>

<div class="oyayoso">
  親要素エリア(width:400px)
  <div class="koyoso">子要素エリア(width:100%)</div>
</div>