あなたはwidth: 50%の２つのinline-block要素が横並びにならずに小一時間悩んだことがありますか？私はあります。そして、あなたもそうだから今ここにたどり着いたのでしょう。
理想
現実
この謎めいた現象の原因を解明し、あなたを横並びマスターへと導く手助けをさせてください。
inline-block要素が横並びにならない原因
次のように子要素A,Bにdisplay: inline-blockとwidth: 50%を設定すれば2つの要素は横並びになるはずです。
<div class="parent">
<div class="child">子要素A</div>
<div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
}
div.child {
display: inline-block;
width: 50%;
}
</style>ところがギッチョンチョン、そうなりません。次のように2列になります。
なぜでしょうか。それは子要素AとBの間にスペースがあるからです。
試しにwidth: 49%にしてみるとこうなります。
<div class="parent">
<div class="child">子要素A</div>
<div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
}
div.child {
display: inline-block;
width: 49%;
}
</style>横並びにはなりましたが、AとBの間に謎のスペースがありますね。これです。
HTMLでは、ソースコードのホワイトスペース（半角スペース、タブ、改行文字）は半角スペースに置き換えて表示されます。この例では<div>子要素A</div>の後ろの改行がスペースに置き換えられています。
なので、width: 50%だと2つの要素の幅とスペースの幅を合わせて100%を超えてしまうので収まりきらずに2行で表示されてしまうというわけです。ナットクのナ！
解決方法
以下の6つの解決方法を解説します。
| 解決方法 | メリット・デメリット | オシャレ度 |
|---|---|---|
| Flexbox | 柔軟な配置に対応 古いブラウザでサポートされていない | オシャレ |
| float | 古いブラウザでもサポートされているclearで回り込みを解除する必要がある | 普通 |
| letter-spacing | 古いブラウザでもサポートされている コードを読んだときに、何をしているのか直感で分かりづらい | 普通 |
| 改行しない | 簡単に実現できる コードが読みづらくなる | ダサい |
| 改行をコメントアウト | コードの可読性を保ちつつ、簡単に実現できる なんかダサい | ダサい |
| タグの途中で改行 | コードの可読性を保ちつつ、簡単に実現できる なんかダサい | ダサい |
Flexboxを使う
最もおすすめな方法はFlexboxです。
親要素にdisplay: flexを指定します。これだけで、この親要素下の余分なホワイトスペースを無視してくれます。また、Flexboxを使う場合は子要素のdisplay: inline-blockは不要です。heightを指定しないと親要素の高さ一杯まで広がってしまうので、必要に応じて設定しましょう。
<div class="parent">
<div class="child">子要素A</div>
<div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
display: flex;
}
div.child {
width: 50%;
height: 24px;
}
</style>Flexboxは要素を横並びにしたいときに限らず、さまざまな配置に柔軟に対応することができるので、ぜひ使い方をマスターしましょう（ここでは詳しい使い方を教えないけど）。
Flexboxは最新のブラウザならば問題なく使えますが、古いブラウザは対応していないことがあります。対応状況を確認してください。
floatを使う
floatは、指定した要素を右または左に寄せてあとに続く要素を回り込ませるプロパティです。Flexboxに未対応の古いブラウザに対応したい場合はこれを使いましょう（もうそんなブラウザには対応しなくていいと思うけど）。
子要素にfloat: leftを指定します。これもdisplay: inline-blockは不要です。
<div class="parent">
<div class="child">子要素A</div>
<div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
}
div.child {
width: 50%;
float: left;
}
</style>letter-spacingを使う
letter-spacingは文字と文字の間隔を指定するプロパティです。
親要素にletter-spacing: -1emを指定すると、子要素Bが1文字分（つまり無駄なスペースの幅分）左に詰めるので子要素A,Bが1列に収まります。子要素にletter-spacing: normalを指定して字間をリセットするのも忘れずに。
<div class="parent">
<div class="child">子要素A</div>
<div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
letter-spacing: -1em;
}
div.child {
display: inline-block;
width: 50%;
letter-spacing: normal;
}
</style>ソースコードで改行しない
改行がスペースとして表示されてしまうことが原因なら、改行しなければいいじゃない。というガテン系の解決策です。（ガテン系ってそういう意味だっけ？）
<div class="parent">
<div class="child">子要素A</div><div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
}
div.child {
display: inline-block;
width: 50%;
}
</style>ソースコードの改行をコメントアウトする
これまた強引な方法ですが、改行しないよりはコードが読みやすくなるでしょうか。
<div class="parent">
<div class="child">子要素A</div><!--
--><div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
}
div.child {
display: inline-block;
width: 50%;
}
</style>タグの途中で改行する
HTMLタグの<...>の途中の改行は無視されます。
<div class="parent">
<div class="child">子要素A</div
><div class="child">子要素B</div>
</div>
<style>
div.parent {
width: 300px;
height: 100px;
}
div.child {
display: inline-block;
width: 50%;
}
</style>無料で利用できるプログラミング学習サービスをお探しならば Code Lesson
はいかがでしょうか。プロのエンジニアが監修した学習ロードマップで効率的に学習、AIに質問、最後にクイズで理解度をチェックできます。
さいごに
というわけで、この記事を最後まで読んでくれたあなたをこう呼ばせてください。
横並びマスター
でわでわ
コメント