【CSS】親要素無視してwidth100%に

①親要素無視してwidth100%に

↑
この部分だけをどうにかしてウィンドウの幅と同じにしたい。

しかし、例えばbodyのwidth: 80%;に指定すると、全ての要素がwidth: 80%;のなってしまう。

一つの要素だけ親要素を無視してwidthを広げたい。

そんな時に使えるのが

width: 100vw;

これは、ウィンドウに合わせてwidth調節できる
（vwは「viewport width」でウィンドウの幅を意味する）

そして、bodyをmargin: 0 auto;で完成。

と思いきやこれは間違いで、そうしてしまうと『トップのシマシマ画像』も開始位置が親要素に依存してしまいます。

ではどうする？

sample.css

.header-top{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

left: 50%;で真ん中に配置させて、

transform: translateX(-50%);で左に50%移動させなければなりません。

これで完成です。

②疑似要素に背景をあてる場合

先ほどは、

sample.css

.header-top{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

疑似要素にあてる場合は、

sample.css

.header {
  position: relative;
}

.header::before{
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);

/*ここまでは同じ*/

  position: absolute;
  content: '';
  height: 100%;
  z-index: -1;
}