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

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ！完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術 <AOHON>

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を１つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

【全3種】他の資料もチェックする

無料で資料をダウンロードする

運営会社

Web制作・広告・コンサルティングのセルリア

運営：株式会社セルリア

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

要素の横並びとは？

方法1:floatでの横並び

要素の回り込み

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

文字の回り込み

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

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

○メリット

○デメリット

方法2:flexboxでの横並び

flexbox基本

HTMLサンプルコード

CSSサンプルコード

flexbox横並びオプション

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

HTMLサンプルコード

CSSサンプルコード

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

HTMLサンプルコード

CSSサンプルコード

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

HTMLサンプルコード

CSSサンプルコード

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

HTMLサンプルコード

CSSサンプルコード

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

HTMLサンプルコード

CSSサンプルコード

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

○メリット

○デメリット

方法3:inlineで横並び

HTMLサンプルコード

CSSサンプルコード

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

○メリット

○デメリット

方法4:inline-blockで横並び

HTMLサンプルコード

CSSサンプルコード

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

○メリット

○デメリット

方法5:table-cellで横並び

HTMLサンプルコード

CSSサンプルコード

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

○メリット

○デメリット

まとめ

運営会社

記事を検索する

人気の記事TOP20

CATEGORY

解析ツール

広告・マーケティング

デザイン・Web制作

Google Workspace

SNS運用