【CSS】widthを親要素に合わせる方法

width:100%を使用する

子要素の「width」プロパティに「100%」を指定することで、親要素の幅に合わせて子要素も同じ幅になります。

.parent {
  width: 500px;
}

.child {
  width: 100%;
}

box-sizingを使用する

「box-sizing」プロパティを「border-box」に指定することで、子要素の幅が、親要素の幅に合わせられます。

.child {
  box-sizing: border-box;
  /* width, padding, border の合計が width */
}

display: flex を使用する

「display: flex」を親要素に指定することで、子要素の大きさが自動的に親要素に合わせられます。

.parent {
  display: flex;
}

.child {
  /* no need to set width */
}

grid layoutを使用する

grid layoutにおいては、「grid-template-columns」を「1fr」に設定することで、親要素に合わせることができます。

.parent {
  display: grid;
  grid-template-columns: 1fr;
}

上記のように、「width」を親要素に合わせる方法は複数あります。使用する方法は、それぞれのプロジェクトやニーズに合わせて選ぶことが重要です。