CSSで親要素と同じ幅にするにはどうすればいいですか？

CSSを用いて子要素の幅を親要素と同じに設定する方法はいくつかあります。状況に応じて最適な方法を選ぶことが重要です。

1. パーセンテージを使う

最も一般的な方法は、子要素の幅にパーセンテージを使うことです。親要素の幅に対する割合で指定するため、親要素の幅が変わっても追従します。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 200px;
}

.child {
  width: 100%; /* 親要素と同じ幅 */
}

emは、親要素のフォントサイズを基準とした相対的な単位です。たとえば、親要素に「width:100px;」と指定されている場合、子要素に「width:1em;」と指定すると親要素と同じ値になります。

ほかにも、pタグ内のspanタグにemを指定して文字の一部だけサイズを変更するという使い方もあります。

<p>これは<span class="large">大きく</span>なる文字です。</p>

.large {
  font-size: 2em; /* 親要素のフォントサイズの2倍 */
}

上記の表は、それぞれの方法の特徴をまとめたものです。

方法	メリット	デメリット	適した場面
パーセンテージ	シンプルでわかりやすい、レスポンシブに対応しやすい	親要素の幅の影響を受ける	親要素の幅に追従させたい場合
em	フォントサイズとの関連性を保てる	親要素のフォントサイズの影響を受ける	文字サイズを基準に幅を決めたい場合

A1: box-sizingプロパティを「border-box」に設定することで、paddingやmarginを含めた幅を指定することができます。

A2: JavaScriptを使って親要素の幅を取得し、子要素の幅に動的に設定する方法があります。または、CSSのメディアクエリを使って、画面サイズに応じて子要素の幅を変更する方法も有効です。

A3: remを使うことで、ルート要素（html要素）のフォントサイズを基準とした相対的な幅を指定することができます。ルート要素のフォントサイズは固定されていることが多いので、子要素の幅を安定させることができます。

その他の参考記事:jquery css 複数