CSSで横並びのデザインを実装する3つのプロパティを実例付きで解説

（最終更新日：2023年8月）

✔当記事は以下のような方に向けて書かれています

「CSSで横並びを実現したいけど、どうすればいいのだろう？」
「CSS横並びのコーディング方法を知りたい」
「横並びの実際の例が見てみたい」

✔当記事で提供する情報

• CSS横並びの基礎知識
• さまざまなデザインに対応するCSS横並びの書き方
• 実際に役立つCSS横並びの例

当記事では、CSS横並びの基本を押さえつつ、さまざまなデザインに応用できる書き方や具体的な例を詳しく解説しています。

最後までお読みいただき、CSS横並びマスターに一歩近づこう！

方法1：floatを使った横並び

こちらでは、「floatを使った横並び」についてお伝えしていきます。

• floatの基本的な使い方
• 2段組みレイアウトの実現

floatの基本的な使い方

“float”、要素を左右どちらかの方向に浮かせて配置できるプロパティです。

これにより、テキストなどの要素が浮かせた要素の周りを囲むように流れます。

float: left;

その要素は左側に浮かび、右側には他のコンテンツが流れ込むようになります。

2段組みレイアウトの実現

“float”を用いて、2段組みレイアウトを実現する方法は非常に簡単です。

2つの要素それぞれに同じ方向へのfloatを指定します。

例えば、以下のように左側にfloatを指定することで、2つの要素を横並びに配置することが可能となります。

.element1 {
  float: left;
  width: 50%;
}

.element2 {
  float: left;
  width: 50%;
}

このCSSコードは、.element1と.element2という2つの要素を左側に浮かせて、ブラウザーのビューポート幅の各々50%を占めるように配置します。

これにより、2つの要素が同じ行に並んで表示されます。

方法2：Flexboxを使った横並び

こちらでは、「Flexboxを使った横並び」についてお伝えしていきます。

• Flexboxの基本的な使い方
• 2段組みレイアウトの実現

Flexboxの基本的な使い方

Flexboxは、CSSの強力なレイアウトモデルで、容易に要素を横並びに配置することが可能です。

Flexboxを使用するには、親要素に以下を指定してください。

display: flex;

その親要素の直接の子要素は自動的にFlexアイテムとなり、横並びに配置されます。

2段組みレイアウトの実現

Flexboxを使用して2段組みレイアウトを作成するには、親要素にdisplay: flex;を指定し、子要素に対して幅を均等に分ける設定を適用します。

具体的には、以下のようなコードになります。

.parent {
  display: flex;
}

.child {
  flex: 1;
}

この設定により、.parentの直接の子要素（.child）が等しく空間を分け合い、2段組みのレイアウトが実現されます。

方法3：inline-blockを使った横並び

こちらでは、「inline-blockを使った横並び」についても見ていきましょう。

• inline-blockの基本的な使い方
• 2段組みレイアウトの実現

inline-blockの基本的な使い方

inline-blockは、block要素とinline要素の性質を併せ持つ、CSSのプロパティです。

これを用いることで、要素を横並びに配置できます。

display: inline-block;

指定された要素はほかのinline要素（例えば、テキスト）と同じ行に配置され、さらに幅や高さの指定も可能です。

2段組みレイアウトの実現

inline-blockを使用して2段組みレイアウトを作成するには、以下のようなコードを用います。

.element1, .element2 {
  display: inline-block;
  width: 50%;
}

上記のCSSコードは、.element1と.element2という2つの要素に対して、inline-blockを適用し、各々の幅をビューポートの50%に設定します。

その結果、これらの要素は横に並んだ2列のレイアウトを形成します。

ただし注意点として、inline-block要素は、要素間に存在する空白（スペースや改行など）を考慮するため、指定したパーセンテージの幅が正確に100%になるとは限らないことを覚えておきましょう。

そのため、場合によっては、要素が新たな行に折り返されることがあります。

横並びができないときの対処法

こちらでは、「横並びができないときの対処法」についてご覧ください。

横並びの実装で問題が発生した場合にどのように対処すれば良いのか、その方法を学びます。

• floatを使った場合の対処法
• Flexboxを使った場合の対処法
• inline-blockを使った場合の対処法

floatを使った場合の対処法

floatプロパティを使用した際に、意図しないレイアウト崩れが発生した場合、以下の点を確認してみましょう。

1. 要素が予期しない位置に移動している
   floatプロパティが適用されているほかの要素が影響を与えている可能性があります。clearプロパティを使用して、floatプロパティの影響を制御しましょう。
2. 要素が予期しない大きさになっている
   ボックスモデルの影響を受けている可能性があります。paddingやborderの大きさも合わせて、要素の大きさを調節しましょう。

Flexboxを使った場合の対処法

Flexboxを使用したレイアウトで問題が発生した場合、以下の点を確認してみましょう。

1. 子要素が予期しない大きさになっている
   flexプロパティ（flex-grow、flex-shrink、flex-basis）が適切に設定されているか確認。
2. 子要素が予期しない位置に配置されている
   justify-contentプロパティやalign-itemsプロパティの設定を見直しましょう。

inline-blockを使った場合の対処法

inline-blockを使用して横並びを実現しようとしたとき、もし思うようなレイアウトにならない場合は、以下の2点を確認してみましょう。

1. inline-block要素間に余計な空間ができてしまう
   HTMLのコード上で要素間に空白（スペースや改行）がないようにすることで対処できます。
2. 幅が予期しないように振る舞う
   要素のbox-sizingプロパティがどのように設定されているかを確認しましょう。特に、paddingやborderが内側に含まれている場合は、それらが全体の幅に影響を与える可能性があります。

まとめ

当記事で説明した3つの方法「float」「Flexbox」「inline-block」は、それぞれ異なる状況や要件に対して最適です。

選択するべき方法は、どのようなデザインを実現したいか、またはどのブラウザのどのバージョンをサポートしたいかによって変わります。

CSSは常に進化しているため、新しいレイアウト手法が登場したら試してみるのも良いでしょう。

これまでの内容を通じて、横並びの実現方法とそのトラブルシューティングについて理解を深めたことでしょう。

各方法には一長一短がありますが、それらを理解し、適切に使い分けることで、様々なデザインを実現できます。

何事も経験と試行錯誤が重要です。

どんどん実践して、スキルを磨いてください。