タイトル・URLをコピー
記事タイトル【HTML/CSS】要素を「横並び」にする方法(初心者向け)
記事URLhttps://digitor.jp/textbook/html-elements-side/
記事タイトル【HTML/CSS】要素を「横並び」にする方法(初心者向け)
記事URLhttps://digitor.jp/textbook/html-elements-side/
POINTこの記事をざっくり言うと
「HTML/CSS」で要素を横並びにする方法がわかり、人に説明できるになる。
要素を横並びにする方法がわかり、実践的に使用できる。
各方法のメリット・デメリットがわかる。
こんにちは!
最近、WEB制作をはじめたけど「どうやって要素を横並びにするの・・?」
「横並びにする方法って何種類かあるの・・?」「各方法にメリット・デメリットはあるの・・!」
初心者WEB制作者の方にとって、要素を横並びするのは最初につまずきやすいポイントではないでしょうか?
私も最初の頃は、要素を横並びにするのに苦労した経験があります。
しかしコツを掴むと要素を簡単に横並びにする事ができ、WEB制作の幅が広がります。
今回は、「要素を横並びする方法」「各方法のメリット・デメリット」を中心に詳しく解説していきます。
要素の横並びとは?
そもそも要素の横並びとは、下記のような状態を言います。
基本webサイトはブロック形式で積み上げられていきます、意図的に要素を横並びに指定しない限り、下記のような状態になります。
要素を横並びにするには5つの方法があります、各方法とメリット・デメリットを解説していきます。
1番のおすすめは2番目に紹介する「方法2:flexboxで横並び」です、時間がない方は2番目だけをみて下さい。
方法1:floatでの横並び
floatとは、指定した要素に他の要素を回り込ませるプロパティです。
画像・サンプルコードで解説していきます。
要素の回り込み
サンプルコード表示結果
HTMLサンプルコード
|
<div class="parent"> <div class="child">ブロック1</div> <div class="child">ブロック2</div> <div class="child">ブロック3</div> </div> |
CSSサンプルコード
|
.child { float: left; } .child { color: #fff; text-align: center; line-height: 100px; width: 100px; height: 100px; background-color: blue; } |
※解説
float-leftを指定することで、指定した要素を左に寄せて、右に回り込ませる事ができています。
文字の回り込み
float-leftの指定により、文字も回り込ませる事ができます。
サンプルコード表示結果
01
テキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みます
HTMLサンプルコード
|
<div class="parent"> <div class="child">01</div> <p>テキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みますテキストが回り込みます</p> </div> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
.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> |
CSSサンプルコード
|
.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> |
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; } |
※解説
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> |
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; } |
※解説
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> |
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; } |
※解説
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> |
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; } |
※解説
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> |
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; } |
※解説
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要素が横並びになる特徴を活かす)。
サンプルコード表示結果
HTMLサンプルコード
|
<div class="parent"> <div class="child">ブロック1</div> <div class="child">ブロック2</div> <div class="child">ブロック3</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; } |
※解説
ブロック要素だった「ブロック1〜ブロック3」をcss1行目の記述「display: inline;
」でinline要素に変更し、横並びにしています(inline要素が横並びになる特徴を活かす)。
「ブロック要素」を→「inline要素」に変更する事で横並びの表示にしています。
inlineで横並びのメリット・デメリット
○メリット
・横並びにしたい要素に1行追加するだけで横並びになる
○デメリット
・要素の間に隙間ができてしまう。
・width・heightを指定できない。
・上下のmarginを指定できない。
方法4:inline-blockで横並び
ブロック要素を、inline-blockに指定する事で、横並びにします(inline-block要素が横並びになる特徴をいかす)。
サンプルコード表示結果
HTMLサンプルコード
|
<div class="parent"> <div class="child">ブロック1</div> <div class="child">ブロック2</div> <div class="child">ブロック3</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; } |
※解説
ブロック要素だった「ブロック1〜ブロック3」をCSS1行目の記述「display: inline-block;」でinline-block要素に変更し、横並びにしています(inline-block要素が横並びになる特徴をいかす)。
inline-blockでの横並びのメリット・デメリット
○メリット
・横並びにしたい要素に1行追加するだけで横並びになる
・ブロック要素同様にwidth・height・marginが指定できる
○デメリット
・要素の間に隙間ができてしまう。
方法5:table-cellで横並び
table-cellで横並びにします(tableの特徴を活かし横並びにする)。
サンプルコード表示結果
HTMLサンプルコード
|
<div class="parent"> <div class="child">ブロック1</div> <div class="child">ブロック2</div> <div class="child">ブロック3</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; } |
※解説
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製作者にとって、要素の横並びはつまずいてしまう最初のポイントだと思います。何度も繰り返すうちに理解が深まってくると思いますので、反復し誰もがつまずく最初の壁を超えていきましょう。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトル【HTML/CSS】要素を「横並び」にする方法(初心者向け)
記事URLhttps://digitor.jp/textbook/html-elements-side/
記事タイトル【HTML/CSS】要素を「横並び」にする方法(初心者向け)
記事URLhttps://digitor.jp/textbook/html-elements-side/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。