更新日: 2023 / 04 / 26

CSS横並びの全て!配置・整列するコツとうまくいかない原因も解決!

カテゴリー: コーディング

この記事ではinline-blockflexなどのCSSプロパティを使って様々な要素を横並びにする方法を紹介します。

単に横並びにするだけでなく、均等に配置したい場合や横並びにしたコンテンツを中央に配置する方法もサンプルコード付きで解説します。

横並びにならない場合の原因と対策についてもまとめているので今日からあなたも横並びマスターになれます!

  1. CSSで要素を横並びにする基本的なテクニック

    1. display:inlineの使い方
    2. display:inline-blockの使い方
    3. display:flexでコンテンツを横並びにする方法
    4. display:gridでコンテンツを横並びにする方法
    5. floatでコンテンツを横並びにする方法
  2. 横並びにしたコンテンツを中央揃えにする方法

    1. CSSで水平方向に中央揃えする
    2. CSSで縦方向に中央揃えする
  3. CSSで均等に横並びにする方法

  4. テキストブロックを横並びにする方法

    1. 複数のテキストブロックを横並びにする
    2. 1つのテキストブロック内で複数列に分ける
  5. CSSで横並びにならない原因と解決方法

    1. 親要素の幅が小さすぎる
    2. 子要素の幅が大きすぎる
    3. CSSの記述ミス
    4. 別のCSSで横並びが上書きされている
  6. まとめ

CSSで要素を横並びにする基本的なテクニック

まずはCSSを使った要素の横並びの基本的なテクニックについて解説します。

基本的な内容を理解できれば、以下のようなコンテンツを横並びにして中央に揃えたり、

CSSで要素を横並びにする基本的なテクニック 横並び例1

以下のような長さの違うメニューを均等に配置したりすることができるようになります。

CSSで要素を横並びにする基本的なテクニック 横並び例2

要素を横並びにするには、displayプロパティに以下の値を入れるか、floatプロパティで横に回り込ませる必要があります。

  • inline
  • inline-block
  • flex
  • grid

それぞれ詳しく解説してきます。

display:inlineの使い方

inlineは指定した要素をインライン要素にすることができるdisplayプロパティの値です。

CSSでセレクタにdisplay: inline;と書くだけで横並びになります。

<p>縦並びの文字</p>
<p>縦並びの文字</p>
<p>縦並びの文字</p>
<br>
<p class="display-inline">横並びの文字</p>
<p class="display-inline">横並びの文字</p>
<p class="display-inline">横並びの文字</p>
.display-inline {
  display: inline;
}

結果はこちらのようになります。

CSSで要素を横並びにする基本的なテクニック display:inlineの使い方

デモページはこちら

ここで少し注意が必要なのは、インライン要素にすると幅(width)や高さ(height)を指定できないことです。

インライン要素は本来、文章の中で使用されることを想定しているので、例えばリンク(aタグ)や強調(strong)のように文章の中で使います。

例えばボタンやタブメニューのような幅や高さを持った要素を横並びにする場合は、次のinline-blockを使います。

display:inline-blockの使い方

inline-blockは幅や高さをもてるインライン要素です。ボタンやメニューの横並びでよく使われます。

<a href="#">普通のリンク</a>
<a href="#">普通のリンク</a>
<a href="#">普通のリンク</a>
<br>
<a class="display-inline-block" href="#">ボタンリンク</a>
<a class="display-inline-block" href="#">ボタンリンク</a>
<a class="display-inline-block" href="#">ボタンリンク</a>
.display-inline-block {
  display: inline-block;
  width: 150px;
  padding: 10px 0;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: #000;
}

結果はこちらのようになります。インライン要素のaタグにdisplay: inline-block;をつけることで幅や高さを追加することができるようになります。

CSSで要素を横並びにする基本的なテクニック display:inline-blockの使い方

display:flexでコンテンツを横並びにする方法

先ほどのinline-blockよりも柔軟に要素を横並びにできるのがflexです。

flexはFigmaなどのデザインツールにある整列ツールと同じような使い方ができます。

CSSで要素を横並びにする基本的なテクニック display:flexでコンテンツを横並びにする方法

詳しい方法については後ほど紹介しますが、ここではflexを使ってコンテンツを横並びにしてみます。

flexはこれまで紹介した2つのやり方と異なり、要素を直接横並びにするのではなく、flexを適用した要素の子要素を横並びにします。

なので次のように横並びにしたいコンテンツをdisplay: flex;をつけた要素で囲むと横並びになります。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<div class="display-flex">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.box {
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #000;
}
.display-flex {
  display: flex;
}

結果はこのようになります。

CSSで要素を横並びにする基本的なテクニック display:flexでコンテンツを横並びにする方法2

display:gridでコンテンツを横並びにする方法

gridflexと同じで子要素を横並びにすることができます。

先ほどはdisplay: flex;を入れるだけで横並びになりましたが、gridの場合はデフォルトが縦方向(row)になっているので横方向(column)に指定する必要があります。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<div class="display-grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.display-flex {
  width: 250px;
  display: grid;
  grid-auto-flow: column;
}

結果はこちらのようになります。

CSSで要素を横並びにする基本的なテクニック display:gridでコンテンツを横並びにする方法

floatでコンテンツを横並びにする方法

CSSのfloatプロパティを使ってコンテンツを横並びにすることもできます。

floatの場合は横並びというよりは横に回り込ませるようなイメージです。なのでfloatで指定した要素以外も横に回り込んでしまうことがあります。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<p>通常のテキスト</p>
<br>
<div class="box float-left"></div>
<div class="box float-left"></div>
<div class="box float-left"></div>
<p>floatで回り込むテキスト</p>
.float-left {
  float: left;
}

結果はこちらのようになります。

CSSで要素を横並びにする基本的なテクニック floatでコンテンツを横並びにする方法

floatをつけてないはずのテキストが回り込んで箱の横に来ています。

この問題を解決するためにはCSSでclear:fix;をつけて回り込みを解消する必要があります。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<p>通常のテキスト</p>
<br>
<div class="box float-left"></div>
<div class="box float-left"></div>
<div class="box float-left"></div>
<div class="clearfix"></div>
<p>floatで回り込むテキスト</p>
.float-left {
  float: left;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

これで回り込みが解消されました。このようにfloatはレイアウト崩れを起こしやすいのであまり使わないほうがいいです。

CSSで要素を横並びにする基本的なテクニック floatでコンテンツを横並びにする方法2

横並びにしたコンテンツを中央揃えにする方法

上記の方法で横並びにしたコンテンツをFigmaやPhotoshopのように水平方向に中央揃えにしたり、縦方向に中央揃えにする方法を紹介します。

CSSで水平方向に中央揃えする

CSSで横並びコンテンツを水平方向に中央揃えにするにはflexを使うのが一番簡単です。

先ほど作ったflexの横並びに高さを変えた箱を作って、align-items: center;で中央揃えにしてみます。

<div class="display-flex">
  <div class="box"></div>
  <div class="box" style="height: 100px;"></div>
  <div class="box" style="height: 70px;"></div>
</div>
<br>
<div class="display-flex align-center">
  <div class="box"></div>
  <div class="box" style="height: 100px;"></div>
  <div class="box" style="height: 70px;"></div>
</div>
.align-center {
  align-items: center;
}

結果はこちらのようになります。高さがバラバラのコンテンツでも中央揃えが可能です。

横並びにしたコンテンツを中央揃えにする方法 CSSで水平方向に中央揃えする

CSSで縦方向に中央揃えする

縦方向に中央揃えにするには、flexで横並びにしたコンテンツにjustify-content: center;を当てるのが一番簡単です。

.content-center {
  justify-content: center;
}

横並びにしたコンテンツを中央揃えにする方法 CSSで縦方向に中央揃えする

他にも、横幅(width)を設定した上でmargin: 0 auto;を使うことで中央に配置することもできます。

.margin-center {
  width: 500px;
  margin: 0 auto;
}

CSSで均等に横並びにする方法

CSSで均等な間隔でコンテンツを横並びにするには、flexjustify-content: space-between;を使います。

<div class="display-flex align-center space-between">
  <div class="box"></div>
  <div class="box" style="height: 100px;"></div>
  <div class="box" style="height: 70px;"></div>
</div>
.space-between {
  justify-content: space-between;
}

結果はこちらのようになります。

CSSで均等に横並びにする方法

テキストブロックを横並びにする方法

ここまではリンクや箱を使って横並びにしました。テキストの場合も同様に複数列に分けて横並びにすることができます。

やり方は次のような方法があります。

  • テキストを複数ブロックに分けて横並びにする
  • 1つのテキストブロック内で複数列に分ける

以下で方法を解説します。

複数のテキストブロックを横並びにする

テキストを複数のブロックに分けた上でそれぞれを横並びにすることができます。

flexを使った場合のサンプルコードは次のようになります。inline-blockでも同様の結果になります。

<div class="display-flex">
  <p class="box-text">テキストを複数のブロックに分けた上でそれぞれを横並びにすることができます。</p>
  <p class="box-text">テキストを複数のブロックに分けた上でそれぞれを横並びにすることができます。</p>
  <p class="box-text">テキストを複数のブロックに分けた上でそれぞれを横並びにすることができます。</p>
</div>
.box-text {
  width: 200px;
}

結果はこちらのようになります。

複数のテキストブロックを横並びにする

1つのテキストブロック内で複数列に分ける

テキストを分けたくない場合、1つのテキストブロック内で複数列に分ける必要があります。

その場合はCSSのcolumn-countプロパティを使って分割したい列を値に入れればOK。

<p class="text-column">テキストを複数のブロックに分けた上でそれぞれを横並びにすることができます。...</p>
.text-column {
  column-count: 3;
  column-gap: 20px; /* 列間の隙間 */
}

結果はこちらのようになります。3つのブロックに分ける方法と違って、文章が続けて次の列に表示されています。あと短い文章だと複数列になりません。

1つのテキストブロック内で複数列に分ける

CSSで横並びにならない原因と解決方法

CSSでコンテンツが横並びにならない原因としては次のようなことが考えられます。

  • 親要素の幅が小さすぎる
  • 子要素の幅が大きすぎる
  • CSSの記述ミス
  • 別のCSSで横並びが上書きされている

以下で詳しく解説します。

親要素の幅が小さすぎる

親要素の幅が小さすぎる場合、横並びにしたコンテンツが自動的に次の行に表示されてしまうため、縦に並んで表示されます。

背景色などがない場合わかりにくいところですが、デベロッパーツールなどで親要素についても確認してみてください。

子要素の幅が大きすぎる

親要素の幅は問題なくても、子要素がwidth: 100%;とかになっていると通常のブロック要素と同じように縦に並んで表示されます。

子要素の幅も問題ないか確認しましょう。下で書いたように別のCSSで上書きされている場合もあります。

CSSの記述ミス

単にプロパティ名や値を書き間違っている可能性もあります。

綴りに間違いがないかなどをデベロッパーツールで確認してください。

別のCSSで横並びが上書きされている

書き間違いがなくても別の場所で書いたCSSが原因でスタイルが上書きされている可能性もあります。

デベロッパーツールではCSSが上書きされている場合、次のように取り消し線で表示されます。

このような状態になっている場合はCSSを修正したり、!importantで強制することで解決します。

CSSで横並びにならない原因と解決方法 別のCSSで横並びが上書きされている

まとめ

この記事ではCSSを使ってコンテンツを横並びにする方法を解説してきました。

横並びコンテンツはWeb制作でよく使うので、基本的なコードの書き方は早めにマスターしておきたいところです。