要素を横並びにする方法【CSS】 TECH

HTMLの要素(element)を横並びにする方法が分からない、忘れてしまった。

そういったお悩みをお持ちの方に向けて、この記事では解説していきます。

要素の横並びとは

そもそも要素の横並びとは、どういう状態かというと下の画像のように、要素と要素が横に並んでいる状態の事です。(HTMLだけでは要素は縦に並んでしまいます)

サイトの見た目(デザイン)や見やすさなどを考慮し、横並びにした方が良い時に使うと思います。

どうやるか解説していきますが、まずは今回説明する中で共通で使用するHTMLとCSSをまずはご確認ください。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container{
  background: gray;
}
.item{
  width: 100px;
  height: 100px;
}
.item:nth-of-type(1){
  background: red;
}
.item:nth-of-type(2){
  background: yellow;
}
.item:nth-of-type(3){
  background: blue;
}

CSSで色や幅を分かりやすいようにスタイル指定しましたが、自由に変更してもらって大丈夫です。

要素の横並びの方法

flexを使う方法【おすすめ】

要素を横並びにできるdisplay: flexを使ったやり方です。

要素の横並びは、この方法を使う事が多いと思います。

実際のコードがこちら↓

.container{
  display: flex;
}

レスポンシブにも対応しやすく、配置のバランスを調整しやすいです。

gridを使う方法

2次元レイアウトを自在にできるdisplay: gridを使ったやり方です。

実際のコードがこちら↓

.container{
  display: grid;
  grid-template-columns: repeat(3, 100px);
}

横方向だけでなく縦方向の高さや幅を指定できるので、tableタグを使わないで格子状のスタイルが簡単に出来ます。

inline-blockを使う方法

幅と高さの指定ができるインライン要素のdisplay: inline-blockを使ったやり方です。

実際のコードがこちら↓

.item{
  display: inline-block;
}

ボタンやナビゲーションを横に並べたい時に使用する事が多い印象。

なお、レスポンシブにする時はdisplay: blockに変えれば、OK。

floatを使う方法

要素を左に寄せて配置するfloat: leftを使ったやり方です。

実際のコードがこちら↓

.item{
  float: left;
}

画像とテキストを並べたい時(下の画像のような時)に、使用するのが最適。

まとめ

今回紹介した方法以外にも、横並びにする方法はあると思います。また、今回紹介した方法が最適でない場合もあると思いますので、色々試してみてください。

個人的にまとめるなら、横並びのレイアウトにしたいならflex、格子状のレイアウトにしたいならgrid、ナビゲーションの横並びはinline-block、テキストを回り込ませたいならfloatを使えば良いんじゃないかと思ってます。