【html/CSS】幅(width)を子要素に合わせる方法

親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。

下記は青背景が親要素、オレンジ背景が子要素です。後述する方法の比較のため兄弟要素にspanタグをいれています。

divの兄弟要素のspan

<style>
.example{
    background: #77abd8;
}
.example>*{
    background: #d3a142;
}
</style>
<div class="example">
    <a href="#">子要素(aタグ)</a>
</div>
<span>divの兄弟要素のspan</span>

この親要素を子要素の幅に合わせましょう。

【方法1】width:fit-content

親要素に「width:fit-content」を指定すると子要素の幅になります。

divの兄弟要素のspan

<style>
.example2{
    /*コレ追加*/width: fit-content;
    background: #77abd8;
}
.example2>*{
    background: #d3a142;
}
</style>
<div class="example2">
    <a href="#">子要素(aタグ)</a>
</div>
<span>divの兄弟要素のspan</span>

widthは横幅を指定するCSSです。

その値を「fit-content」にすると子要素に合わせて最小幅になります。

なお、「fit-content」はIEでは効きません。

【方法2】display:inline-block

親要素に「display:inline-block」を指定すると子要素の幅になります。

divの兄弟要素のspan

<style>
.example3{
    /*コレ追加*/display: inline-block;
    background: #77abd8;
}
.example3>*{
    background: #d3a142;
}
</style>
<div class="example3">
    <a href="#">子要素(aタグ)</a>
</div>
<span>divの兄弟要素のspan</span>

inline-blockはブロック要素とインライン要素両方の特徴を合わせ持つ要素です。

ブロック要素は親要素に合わせて最大幅になりますが、inline-blockなら子要素に合わせて最小幅になります。

ただしブロック要素と違い、兄弟のインライン要素は後ろにくっついてしまいます。

改行したいのであればbrで改行しましょう。

2つの違い

	width:fit-content	display:inline-block
兄弟のインライン要素	改行	連続する（brで改行）
ブラウザ対応状況	IEで効かない	問題なし

どちらを使うかはIEへの対応要不要で判断するといいでしょう。

大型サイトであればIEへの対応を考えた方がいいですが、小規模なサイトであればIEは無視してもいいでしょう。

【まとめ】親要素の幅を子要素に合わせる方法

• width:fit-content（IE非対応）
• display:inline-block

以上、親要素の幅を子要素に合わせる方法でした。