containerで1024pxとかなっている時、
背景色だけいっぱいに広げたい、とか言うときに使う。
innerはcontainerと同じ幅に設定。
コンテンツの横幅は揃って、ignore~の箇所の背景色のみ画面いっぱいになる。
<divclass="container"><divclass="background-orange ignore-parent-width"><divclass="ignore-parent-width-inner"></div></div></div>.container{width:1024px;min-width:1024px;}.background-orange{background-color:#FFF6F5;}.ignore-parent-width{// 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517width:100vw;position:relative;left:50%;transform:translateX(-50%);.ignore-parent-width-inner{width:1024px;min-width:1024px;margin:0auto;}}// スマホ表示@media(max-device-width:480px){.container{width:100%;min-width:100%;}.ignore-parent-width{// 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517width:100vw;position:relative;left:50%;transform:translateX(-50%);.ignore-parent-width-inner{width:100%;min-width:100%;margin:0auto;}}}