Parallels Desktop 15% OFFセール中 3月1日までClick!

【CSS】width:50%の2つの要素が横並びにならない原因と解決方法

CSSで要素を横並びにする方法

あなたはwidth: 50%の2つのinline-block要素が横並びにならずに小一時間悩んだことがありますか?私はあります。そして、あなたもそうだから今ここにたどり着いたのでしょう。

子要素A
子要素B

理想

子要素A
子要素B

現実

この謎めいた現象の原因を解明し、あなたを横並びマスターへと導く手助けをさせてください。

目次

inline-block要素が横並びにならない原因

次のように子要素A,Bにdisplay: inline-blockwidth: 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

なぜでしょうか。それは子要素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

横並びにはなりましたが、AとBの間に謎のスペースがありますね。これです。

HTMLでは、ソースコードのホワイトスペース(半角スペース、タブ、改行文字)は半角スペースに置き換えて表示されます。この例では<div>子要素A</div>の後ろの改行がスペースに置き換えられています。

もっと正確に言うと、複数のホワイトスペースが連続している場合は1つにまとめられて半角スペースに置き換えられます。上の例では<div>子要素A</div>の後ろの改行と<div>子要素B</div>の前のインデント(スペースまたはタブ)がまとめられて1つの半角スペースになります。

なので、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>

さいごに

というわけで、この記事を最後まで読んでくれたあなたをこう呼ばせてください。

横並びマスター

でわでわ

CSSで要素を横並びにする方法

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメントする

目次