【html/CSS】幅(width)を親要素に合わせる方法
「子要素の幅を親要素に合わせたいのにピッタリ合わない!?」
子要素の幅(width)を親要素に合わせる方法を解説します。
子要素がブロック要素かインライン要素かによって方法が異なります。
ブロック要素、インライン要素がわからない方は下記をご覧ください。
目次
【spanやaタグの場合】display:block
子要素がspanやaタグなどのインライン要素の場合、「display:block」を指定してブロック要素にします。
ブロック要素の横幅は親の幅になるためです。
<style>
.example{
background: #77abd8;
width: 300px;
}
.example>*{
/*コレ*/display: block;
background: #d3a142;
}
</style>
<div class="example">
親要素
<a href="#">子要素(aタグ)</a>
<span>子要素(spanタグ)</span>
</div>↓結果
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【tableやinline-blockの場合】width:100%
子要素がtableまたはinline-blockの要素（テキストボックス等）の場合は「width:100%」を指定しましょう。
paddingとborderをwidthに含めるために「box-sizing:border-box」も指定しましょう。
<style>
.example2{
background: #77abd8;
width: 300px;
}
.example2>*{
/*コレ*/width: 100%;
/*コレ*/box-sizing: border-box;
background: #d3a142;
}
</style>
<div class="example2">
親要素
<input type="text" value="子要素(テキストボックス)">
<table><tr><td>子要素(table)</td></tr></table>
</div>↓結果
| 子要素(table) |
【divやpの場合】そのまま
divやpなどのブロック要素は何もしなくても親要素の幅にそろいます。
widthの初期値はautoであり、ブロック要素の「width:auto」は親の幅に合うからです。
親の幅に合わないときはwidthに別の値が指定されている可能性があります。
「width:auto」を上書き指定しましょう。
<style>
.example3{
background: #77abd8;
width: 300px;
}
.example3>*{
background: #d3a142;
}
</style>
<div class="example3">
親要素
<div>子要素(div)</div>
<p>子要素(p)</p>
</div>↓結果
子要素(p)
親要素のpaddingを0にする
上記指定をしても親の幅にそろわない場合は、親にpaddingが指定されている場合があります。
子要素の「width:100%(width:auto)」は親要素のpaddingを除いたwidthになるためです。
親要素を「padding:0」にするか、paddingを削除することで子要素の幅が親要素に合います。
padding:20px
<style>
.example4{
/*コレ*/padding: 20px;
background: #77abd8;
width: 300px;
}
.example4>*{
background: #d3a142;
}
</style>
<div class="example4">
親要素
<div>子要素(div)</div>
</div>padding:0（削除）
<style>
.example5{
/*削除padding: 20px;*/
background: #77abd8;
width: 300px;
}
.example5>*{
background: #d3a142;
}
</style>
<div class="example5">
親要素
<div>子要素(div)</div>
</div>親要素のpaddingを0にできないとき
親要素のpaddingを0にできないときは子要素をマイナスマージンで相殺しましょう。
親要素に「padding:0 20px」が指定されているなら、
子要素に「margin:0 -20px」を指定します。
子要素のmarginを0にする
親要素のpaddingを0にしても幅が合わなかったり、ずれているなら子要素にmarginが指定されている可能性があります。
marginが指定されているとその数値分押し出されるためです。
子要素を「margin:0」にするか、marginを削除することで子要素の幅が親要素に合います。
margin:20px
<style>
.example6{
background: #77abd8;
width: 300px;
}
.example6>*{
/*コレ*/margin: 20px;
background: #d3a142;
}
</style>
<div class="example6">
親要素
<div>子要素(div)</div>
</div>margin:0（削除）
<style>
.example7{
background: #77abd8;
width: 300px;
}
.example7>*{
/*削除margin: 20px;*/
background: #d3a142;
}
</style>
<div class="example7">
親要素
<div>子要素(div)</div>
</div>【まとめ】子要素の幅を親要素に合わせる方法
子要素の要素で方法が異なる
- 【spanやaタグの場合】display:block
- 【tableやinline-blockの場合】width:100%とbox-sizing:border-box
- 【divやpの場合】そのまま
上記でも合わないとき
- 親要素のpaddingを0にする
- 子要素のmarginを0にする
以上、子要素の幅を親要素に合わせる方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
