【CSS】HTML要素を横並びにする方法について

本記事の目次

CSSでHTML要素を横並びにする

HTMLのdivタグやpタグなどのブロック要素は、基本的に上から下への縦並びに配置されます。

しかし、WEBページを作るにあたって、HTML要素の横並びは避けることはできません。

今回は、以下のHTMLをベースとして、CSSでHTML要素を横並びにする方法についてご紹介します。

< HTML >

<div class="row">
  <p>要素1</p>
  <p>要素2</p>
  <p>要素3</p>
</div>

横並びしたい要素の displayプロパティに inline-block を指定することで、横並びにすることができます。

.row p { /* 横並びにしたい要素に指定する */
  display: inline-block;
}

inline-block を指定した要素は、横幅や高さ、padding、marginも指定することができます。

inline-block を指定するのは横並びにしたい要素自身のため、余計なラッパー要素を追加する必要がない点は優れていると言えるでしょう。

横並びにしたい要素のdisplayプロパティに table-cell を、親要素のdisplayプロパティに tabel を指定することで、HTML要素を横並びにすることができます。

.row {
  display: table;
}
.row p {
  display: table-cell;
}

table-cell を使う利点として、横並びにする要素の幅を自動で調整してくれる点が挙げられますが、その要素自体にmarginが指定できなかったり、レスポンシブ対応での柔軟な対応が難しかったりと、table-cell が使われるケースはあまり多くありません。

横並びにしたい要素のfloatプロパティにleft/rightを指定することで、横並びにすることができます。

.row p {
  /* 左から並べる */
  float: left;
  /* 右から並べる */
  float: right;
}

float での横並びは、以前までは多く使われていた方法になります。

しかし、次にご紹介するFlexboxの登場により、最近は専らFlexboxを使った横並びが主流となっています。

float を使う場合には高さが0で計算されることや、float要素の下に他の要素が入り込まないためのclear: both; の設定を忘れないように注意が必要です。

Flexbox でHTML要素を横並びにする場合、親要素のdisplayプロパティに flex を指定します。

.row {
  display: flex;
}

Flexbox では、縦並びへの変更や逆順への変更、水平・垂直方向の位置を簡単に調整できるため、レスポンシブ対応もしやすくとても便利です。

Gridは要素の横並びのためのレイアウト手法ではありませんが、要素を横並びにすることもできます。

.row {
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: 100px 100px 100px;
}

レスポンシブ対応などで柔軟に配置を変更したい時には便利なGridですが、その多機能さゆえの扱いの難しさより、HTML要素の横並びについては Grid よりも Flexbox の方が使われるケースが多いです。

横並びとは少しずれますが、以下の記事でHTML要素の中央寄せについてGridとFlexboxの比較をしていますので、ぜひ参考にしてください。

HTMLとCSSでWEBページをコーディングする時、HTML要素を横並びにすることは多々あります。

HTML要素を横並びにする時には Flexbox を使う方法が便利なので、しっかり覚えておきましょう。