【HTML/CSS】要素を「横並び」にする方法（初心者向け）

こんにちは！
最近、WEB制作をはじめたけど「どうやって要素を横並びにするの・・？」
「横並びにする方法って何種類かあるの・・？」「各方法にメリット・デメリットはあるの・・！」
初心者WEB制作者の方にとって、要素を横並びするのは最初につまずきやすいポイントではないでしょうか？
私も最初の頃は、要素を横並びにするのに苦労した経験があります。
しかしコツを掴むと要素を簡単に横並びにする事ができ、WEB制作の幅が広がります。
今回は、「要素を横並びする方法」「各方法のメリット・デメリット」を中心に詳しく解説していきます。

要素の横並びとは？

そもそも要素の横並びとは、下記のような状態を言います。

横並び

基本webサイトはブロック形式で積み上げられていきます、意図的に要素を横並びに指定しない限り、下記のような状態になります。

縦並び

要素を横並びにするには5つの方法があります、各方法とメリット・デメリットを解説していきます。
１番のおすすめは2番目に紹介する「方法2:flexboxで横並び」です、時間がない方は2番目だけをみて下さい。

方法1:floatでの横並び

floatとは、指定した要素に他の要素を回り込ませるプロパティです。
画像・サンプルコードで解説していきます。

要素の回り込み

サンプルコード表示結果

ブロック1

ブロック2

ブロック3

HTMLサンプルコード

<div class="parent">
   <div class="child">ブロック1</div>
   <div class="child">ブロック2</div>
   <div class="child">ブロック3</div>
 </div>

</div>

CSSサンプルコード

.child {
 float: left;
}
 
.child {
 color: #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.child {

float: left;

}

.child {

color: #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説

float-leftを指定することで、指定した要素を左に寄せて、右に回り込ませる事ができています。

文字の回り込み

float-leftの指定により、文字も回り込ませる事ができます。

サンプルコード表示結果

テキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みます

HTMLサンプルコード

<div class="parent">
   <div class="child">01</div>
   <p>テキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みます</p>
 </div>

<p>テキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みます</p>

</div>

CSSサンプルコード

.parent {
 width: 500px;
}
 
 
.child {
 float: left;
}
 
 
.child {
 color: #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
 margin: 10px;
}

.parent {

width: 500px;

}

.child {

float: left;

}

.child {

color: #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

margin: 10px;

}

※解説
要素だけではなく、文字も回り込ませる事ができます。

floatのメリット・デメリット

○メリット

　・文字も回り込みさせる事ができる
　・古いブラウザでも表示が可能

○デメリット

　・要素を回り込ませたくない時に使いずらい
　・clearfixを記述しないと表示が崩れてしまう事がある
　・子要素の高さを揃える事ができない
　・横幅を均等に揃える事ができない

方法2:flexboxでの横並び

●1番オススメの方法です。

一番オススメの方法になります、理由は細かい調整が簡単にでき、レスポンシブにも対応しやすいからです。

flexbox基本

親要素にCSSプロパティ「display: flex;」を指定、この1行で要素を横並びにする事ができます。

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
</div>

</div>

CSSサンプルコード

.parent {
 display: flex;
 }
 
.child {
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.parent {

display: flex;

}

.child {

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
1.flexボックスの基本はHTML内に親要素となるコンテナを作成
2.その中に子要素となるアイテムを作成（今回の例は、ブロック1.ブロック2.ブロック3）
3.親要素にCSSプロパティ「display: flex;」を指定し子要素が横並びになるといった流れになります。

flexbox横並びオプション

親要素にCSSプロパティ「display: flex;」を指定し簡単に横並びにする事ができましたが、「justify-contentプロパティ」を使用し、横並びの指定方法（水平方向の位置）も簡単に指定できます。例えば下記のような状態です。

1つ1つ解説していきます。

○justify-content: flex-start; （アイテムを左揃えで表示[デフォルト]）

サンプルコード表示結果

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
 <div class="child">ブロック4</div>
 <div class="child">ブロック5</div>
 <div class="child">ブロック6</div>
</div>

</div>

CSSサンプルコード

.parent {
 display: flex;
 justify-content: flex-start;
}
 
.child {
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.parent {

display: flex;

justify-content: flex-start;

}

.child {

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
CSSコード2行目に「justify-content: flex-start;」の記述を追加しました。
表示は変わりません、理由はdisplay: flex;を使用した時のデフォルトの並び方は、今回指定した「左揃えのjuistify-content: flex-start」だからです。

○justify-content: flex-end; （アイテムを右揃えで表示します。）

サンプルコード表示結果

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
 <div class="child">ブロック4</div>
 <div class="child">ブロック5</div>
 <div class="child">ブロック6</div>
</div>

</div>

CSSサンプルコード

.parent {
 display: flex;
 justify-content: flex-end;
}
 
.child {
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.parent {

display: flex;

justify-content: flex-end;

}

.child {

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
CSSサンプルコード2行目に「 justify-content: flex-end;」の記述を追加し表示が右揃えに変わりました。
プロパティ1つ記述するだけで、並び方を変更できる点はとても便利です。「display: flex;」をオススメできる理由の一つです。

○justify-content: center; （アイテムを中央で表示します。）

サンプルコード表示結果

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
 <div class="child">ブロック4</div>
 <div class="child">ブロック5</div>
 <div class="child">ブロック6</div>
</div>

</div>

CSSサンプルコード

.parent {
 display: flex;
 justify-content: center;
}
 
.child {
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.parent {

display: flex;

justify-content: center;

}

.child {

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
CSSサンプルコード2行目に「justify-content: center; 」の記述を追加し、表示が中央揃えに変わりました。

○justify-content: space-between; （両端のアイテムの余白を空けずに配置し、他の要素は均等に間隔を空けて配置）

サンプルコード表示結果

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
 <div class="child">ブロック4</div>
 <div class="child">ブロック5</div>
 <div class="child">ブロック6</div>
</div>

</div>

CSSサンプルコード

.parent {
 display: flex;
 justify-content: space-between;
}
 
.child {
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.parent {

display: flex;

justify-content: space-between;

}

.child {

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
CSSサンプルコード2行目に「justify-content: space-between;」の記述し、表示が両端のアイテムの余白を空けずに配置し、他の要素は均等に間隔を空けて配置に変わりました。

○justify-content: space-around; （両端のアイテムを含めて、均等な間隔を空けて配置します。）

サンプルコード表示結果

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
 <div class="child">ブロック4</div>
 <div class="child">ブロック5</div>
 <div class="child">ブロック6</div>
</div>

</div>

CSSサンプルコード

.parent {
 display: flex;
 justify-content: space-around;
}
 
.child {
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.parent {

display: flex;

justify-content: space-around;

}

.child {

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
CSSサンプルコード2行目に「justify-content: space-around;」の記述をし、両端のアイテムを含めて、均等な間隔を空けて配置しました。

display: flex;のメリット・デメリット

○メリット

・CSSがシンプルな記述で済む
・細かい調整ができ・レスポンシブにも対応している

○デメリット

・古いブラウザのバージョンでは思い通り表示されない場合がある

このほかにもflexboxには様々なプロパティが存在しています。
今回は横並びに焦点を当て、水平方向のプロパティのみの紹介でしたが、より詳しくflex boxについて知りたい方は下記を参照にしてみて下さい。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

方法3:inlineで横並び

ブロック要素をinline要素に指定する事で、横並びをします（inline要素が横並びになる特徴を活かす）。サンプルコード表示結果

ブロック1

ブロック2

ブロック3

HTMLサンプルコード

<div class="parent">
    <div class="child">ブロック1</div>
    <div class="child">ブロック2</div>
    <div class="child">ブロック3</div>
</div>

</div>

CSSサンプルコード

.child {
 display: inline;
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.child {

display: inline;

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
ブロック要素だった「ブロック1〜ブロック3」をcss1行目の記述「display: inline; 」でinline要素に変更し、横並びにしています（inline要素が横並びになる特徴を活かす）。
「ブロック要素」を→「inline要素」に変更する事で横並びの表示にしています。

inlineで横並びのメリット・デメリット

○メリット

・横並びにしたい要素に1行追加するだけで横並びになる

○デメリット

・要素の間に隙間ができてしまう。
・width・heightを指定できない。
・上下のmarginを指定できない。

方法4:inline-blockで横並び

ブロック要素を、inline-blockに指定する事で、横並びにします（inline-block要素が横並びになる特徴をいかす）。サンプルコード表示結果

ブロック1

ブロック2

ブロック3

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
</div>

</div>

CSSサンプルコード

.child {
 display: inline-block;
 color: #fff;
 border: solid 1px #fff;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background-color: blue;
}

.child {

display: inline-block;

color: #fff;

border: solid 1px #fff;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background-color: blue;

}

※解説
ブロック要素だった「ブロック1〜ブロック3」をCSS1行目の記述「display: inline-block;」でinline-block要素に変更し、横並びにしています（inline-block要素が横並びになる特徴をいかす）。

inline-blockでの横並びのメリット・デメリット

○メリット

・横並びにしたい要素に1行追加するだけで横並びになる
・ブロック要素同様にwidth・height・marginが指定できる

○デメリット

・要素の間に隙間ができてしまう。

方法5:table-cellで横並び

table-cellで横並びにします（tableの特徴を活かし横並びにする）。サンプルコード表示結果

ブロック1

ブロック2

ブロック3

HTMLサンプルコード

<div class="parent">
 <div class="child">ブロック1</div>
 <div class="child">ブロック2</div>
 <div class="child">ブロック3</div>
</div>

</div>

CSSサンプルコード

.parent{
  display: table;
  table-layout: fixed;
  text-align: center;
 }

 .child{
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background-color: blue;
  color: #ffffff;
 }

.parent{

display: table;

table-layout: fixed;

text-align: center;

}

.child{

display: table-cell;

vertical-align: middle;

width: 100px;

height: 100px;

background-color: blue;

color: #ffffff;

}

※解説
table-cellは、テーブルタグの子要素のようなスタイルを与える事で、横並びにする事ができるdisplayプロパティ値です。
テーブルの中身を再現し横並びにしていますので、通常のブロック要素とは違う動きをしますので注意が必要です。

table-cellで横並びにするメリット・デメリット

○メリット

・コードがシンプルに書ける
・垂直方向の位置を柔軟に調整できる
・古いブラウザでも動作する

○デメリット

・要素の折り返しができない
・要素間の余白をmargin調整できない

まとめ

最後にポイントをまとめます。
要素を横並びする方法は5点ありました。

1.方法1:floatで横並び
2.方法2:flexboxで横並び
3.方法3:inlineで横並び
4.方法4:inline-blockで横並び
5.方法5:table-cellで横並び

の5点あり、各方法にメリット・デメリットがありました。
中でも一番オススメの方法は、「方法2:flexboxで横並び」です。

初心者web製作者にとって、要素の横並びはつまずいてしまう最初のポイントだと思います。何度も繰り返すうちに理解が深まってくると思いますので、反復し誰もがつまずく最初の壁を超えていきましょう。