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

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

Contents

親要素（class=oyayoso）と子要素（class=koyoso）のCSSの記述
HTML記述
デモページ

親要素（class=oyayoso）と子要素（class=koyoso）のCSSの記述

※子要素の幅をビューポートパーセンテージを指定してます。必要に応じて書き換えてください。

<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>

HTML記述

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

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