閉じる

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

要素を横並びにする方法を初心者の方向けに紹介。 要素を横並びにする方法5つを、メリット・デメリット、サンプルコード付きで解説します。 方法1つ1つをサンプルコード付きで詳しく解説しますので、初心者の方にもわかりやすい内容になっています。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「どうやって要素を横並びにするの・・?」
「横並びにする方法って何種類かあるの・・?」「各方法にメリット・デメリットはあるの・・!」

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

要素の横並びとは?

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

横並び
横並び


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

縦並び
縦並び

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

方法1:floatでの横並び

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

要素の回り込み

サンプルコード表示結果

ブロック1
ブロック2
ブロック3

HTMLサンプルコード

CSSサンプルコード

※解説

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

文字の回り込み

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

サンプルコード表示結果

01

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

HTMLサンプルコード

CSSサンプルコード

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

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

○メリット

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

 

○デメリット

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

方法2:flexboxでの横並び

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

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

flexbox基本

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

HTMLサンプルコード

CSSサンプルコード

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

flexbox横並びオプション

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

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

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

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

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

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

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

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

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

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

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

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

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

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

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

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
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サンプルコード

CSSサンプルコード

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

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

○メリット

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

○デメリット

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

方法4:inline-blockで横並び

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

ブロック1
ブロック2
ブロック3

HTMLサンプルコード

CSSサンプルコード

※解説
ブロック要素だった「ブロック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サンプルコード

CSSサンプルコード

※解説
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の最新情報をお届けします

minweb編集部(株)セルリア

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

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

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

ダウンロード資料画像

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

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