ブロック要素とインライン要素の違い | 横並び・中央寄せ・Flexboxの法則

HTML要素の性質は、大きく2つのタイプに分類できます。

それは「ブロック要素」と「インライン要素」です。

そして、この違いを理解することが、「なぜ横並びにならないのか？」「なぜ幅が変わらないのか？」といった、Web制作で誰もが経験するレイアウトの悩みを解決するポイントになります。

この記事では、基本的な違いを知るだけでなく、「どんなときに、なぜその要素を選ぶのか」というレイアウトの基本原則をわかりやすく解説します。

3つの決定的な違い

ブロック要素 (block)とは？

見出しや段落、表、ヘッダーなど、文書の構造を形づくる要素。1つのブロックとして扱われ、横方向に幅いっぱいに表示され、前後には改行が入る。幅・高さ・余白などの設定ができる。

HTMLコード（例）

CSSコード（例）

.block-element {
background-color: #1e1e1e;
border: 2px solid red;
margin-bottom: 10px;
width: 80%; /* 幅の設定が可能 */
height: 50px; /* 高さの設定が可能 */
padding: 10px;

/* 幅、高さ、上下左右の余白（margin/padding）を設定できる */
}

ブロック要素

インライン要素 (inline)とは？

リンクや文字の装飾など、文章の一部として扱われる要素。改行されずに同じ行内に並び、幅や高さを指定することができない。要素の大きさは文字の量によって決まる。

HTMLコード（例）

CSSコード（例）

.inline-element {
background-color: #ccffcc;
border: 2px solid green;
/* width: 100px; は無効 */
/* height: 50px; は無効 */
padding: 5px;
/* 左右のpaddingは有効、上下のpaddingは見た目上は広がるが、他の行に影響を与えない */
margin-left: 10px;/* 左右のmarginは有効 */

/* 幅、高さ、上下の余白（margin-top/bottom）は無効。 */
}

インライン要素

インラインブロック要素 (inline-block)とは？

横に並び、サイズを指定できる要素。ブロック要素とインライン要素の両方の特性を持つ。

HTMLコード（例）

<div class=”inline-block-element”>Box A</div>
<div class=”inline-block-element”>Box B</div>
<div class=”inline-block-element”>Box C</div>
<p>
↑ インラインブロック要素は、横並びになりつつ、幅と高さを自由に設定できています。
</p>

CSSコード（例）

.inline-block-element {
display: inline-block;
background-color: #ccccff;
border: 2px solid blue;
margin: 5px;
width: 150px;/* 幅の設定が可能 */
height: 80px;/* 高さの設定が可能 */
line-height: 80px;
text-align: center;/* テキストを中央に寄せるため */

/* ブロックのように、幅、高さ、上下左右の余白を設定できる */
}

インラインブロック要素

わかりやすく区別できるように表にまとめてみました。

項目	ブロック要素 (display: block)	インライン要素 (display: inline)	インラインブロック (display: inline-block)
表示（改行）	要素の前後で改行が入る（縦に並ぶ）	改行されずに同じ行に並ぶ（横に並ぶ）	改行されずに同じ行に並ぶ（横に並ぶ）
幅（width）/高さ（height）	指定できる（既定値は親要素の幅いっぱい）	指定できない（内容は文字の量に依存）	指定できる
余白（margin/padding）	上下左右すべて指定できる	左右のみ指定できる（上下はレイアウトに影響なし）	上下左右すべて指定できる

応用｜displayプロパティによる変換

CSSのdisplayプロパティを使うことで、要素の基本的な振る舞いを変更できます。

display:block; インライン要素をブロックレベル要素に変更する。

display:inline; ブロック要素をインライン要素に変更する。

display:inline-block; ブロック要素のように幅や高さを指定でき、かつインライン要素のように横に並べることができます。

リスト 要素を用いたナビゲーションメニューを横並びにする場合、 display:inline-block;がよく使われます。

もちろん、横並びにでき、各項目に幅を設定できるからです。

要素タイプ別：使う場面を実例でチェック

ブロック要素

ブロック要素は、Webページの中で文章や画像などをひとまとまりにして配置するときに使います。

どんな時に使うか	ブロック要素のタグ例	理由（なぜブロックを選ぶか）
サイトの領域を分ける	<div>, <section>, <header>	ページの大きな部分（ヘッダー・メイン・サイドバーなど）をきちんと分けて表示したいときに使います。
コンテンツを中央に寄せる	<div>（CSSでmargin: 0 auto;）	幅を決めると、左右の空きが自動で調整されて、真ん中に表示されます。
見出しや段落	<h1>〜<h6>, <p>	文章をわかりやすく区切ったり、見出しや段落の前後にスペースを入れたいときに使います。

インライン要素

インライン要素は、文章の途中に入る要素です。改行せずに、文字の流れの中にそのまま表示されます。

どんな時に使うか	インライン要素のタグ例	理由（なぜインラインを選ぶか）
文章内のリンク設定	<a>	文章の一部だけにリンクをつけたいときに使います。
キーワードのハイライト	<span>, <strong>	文章の中で一部の文字だけ強調したいときに使います。
テキスト内へのアイコン挿入	<img>	文章の途中に小さな画像やアイコンを文字と一緒に並べたいときに使います。 さらに、text-align:center;を使えば、中央にそろえることができます。

要素タイプごとにわかる中央寄せのコツ

中央寄せがうまくいかないのは、要素に適したCSSを使っていないためです。

要素タイプ	左右中央寄せのやり方	理由
ブロック要素 (div, pなど)	margin: 0 auto;（with指定必須）	ブロック要素だから、余白の自動計算（auto）が効く。text-alignは効かない。
インライン要素 (span, テキスト)	親要素に text-align: center; を指定	インライン要素は文章の一部なので、親要素のテキスト配置設定に従う。margin: auto;は効かない。

HTMLコード（例）

<div class=”block-center”>
このブロック要素が中央に配置されます。
</div>

CSSコード（例）

.block-center {
width: 300px;
margin: 20px auto;
background-color: #ffcccc;
padding: 10px;
}

HTMLコード（例）

<div class=”parent-center”>
<p>この段落内の<span class=”inline-center”>インライン要素</span>が中央に配置されます。</p>
<img src=”example.png” alt=”画像” class=”inline-center-img”>
</div>

CSSコード（例）

.parent-center {
text-align: center;/* 【コツ】親要素にtext-align: center; を指定する */
background-color: #ccffcc;
padding: 20px;
}
.inline-center {
/* インライン要素自体に margin: auto は効かない */
background-color: #a5d6a7;
padding: 5px;
}
.inline-center-img {
/* 画像もインライン要素（またはインラインブロック要素）として扱われるため、親のtext-alignが効く */
width: 100px;
height: 100px;
background-color: #81c784;
}

応用編：Inline-BlockとFlexboxの使い分け

「横に並べたいけど、サイズも指定したい」というときは、inline-block かFlexbox を使います。

Inline-Blockを使うのに適したケース

inline-blockは、「コンテンツをテキストのように自動で折り返したい」場合に特に便利です。

例：タグリストの作成

場面	CSSでの解決策	理由
カテゴリータグの横並び	span{ display: inline-block; }	「[HTML] [CSS]」のようにタグを並べ、親の幅を超えたら自動で次の行に折り返してほしい場合に最適。

Flexboxを使うのに適したケース

Flexboxは、完璧な配置や複雑な中央寄せをしたい場合に使います。

例：ナビゲーションやコンポーネントの配置

場面	CSSでの解決策	理由
上下左右の完璧な中央寄せ	display: flex; justify-content: center; align-items: center;	ブロック・インラインに関わらず、要素をコンテナの中心に正確に配置でき、最も簡単で確実な方法です。
均等な間隔のナビゲーション	display: flex; justify-content: space-between;	メニュー項目を横に並べ、要素間の間隔を自動で均等に広げたい場合。inline-blockのように要素間に余計な隙間も生まれません。

HTMLコード（例）

<div class=”center-container”>
<div class=”centered-box”>
完璧な中央寄せ
</div>
</div>

CSSコード（例）

.center-container {
/* Flexboxの親要素（コンテナ）にする */
display: flex;
height: 200px;/* 高さを指定しないと中央寄せが確認できないため、画面の高さを指定 */
width: 400px;
border: 3px solid #00BCD4;
}
.center-container {
/* Flexboxの魔法の2行 */
justify-content: center;/* 1. 水平方向（左右）の中央寄せ */
align-items: center;/* 2. 垂直方向（上下）の中央寄せ */
}
.centered-box {
width: 150px;
height: 50px;
background-color: #4DB6AC;
text-align: center;
line-height: 50px;
color: white;
}

上下左右の完璧な中央寄せ

HTMLコード（例）

<nav>
<ul class=”nav-flex”>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>製品</a></li>
<li><a href=”#”>サービス</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</nav>

CSSコード（例）

.nav-flex {
list-style: none;
padding: 0;
margin: 0;
background-color: #ebf8ff;
height: 50px;
display: flex;/* 【重要】親要素を Flex コンテナにする */
justify-content: space-between;/* 【コツ】最初と最後の要素を両端に寄せ、残りの間隔を均等に配分 */
align-items: center;/* 垂直方向のメニューテキストを中央寄せ */
}
.nav-flex li a {
display: block;/* <a>をブロック化して、li全体をクリック可能に */
padding: 0 15px;/* 項目自体の左右の余白 */
text-decoration: none;
color: black;
font-weight: bold;
}

均等な間隔のナビゲーション

まとめ：Flexboxを優先する

現在、inline-block が持つ隙間問題や上下中央寄せの難しさを避けるため、レイアウトの基本はFlexboxを使うことが推奨されています。

inline-blockは、前述の「自動折り返し」が必須な、ごく限られたシンプルなケースでのみ使うのが、最も効率的で悩まない方法です。

FlexboxとInline-blockの使い分けは、「縦に流れる自動折り返しが必要か」と「完璧な配置や複雑な整列が必要かどうか」で判断します。

※完璧な配置とは上下・左右の正確な中央寄せ（センタリング）や均等配置です。

特徴	display: inline-block	display: flex (Flexbox)
自動折り返し	適している。親要素からはテキストのように扱われ、自然に次の行へ流れる。	そのままでは対応できない。折り返すには flex-wrap:wrap; が別途必要。
要素間の隙間	半角スペース分の隙間が自動で生まれる。	隙間はゼロ。完璧に詰めて並べられる。
配置	左右の配置のみ。上下中央寄せは非常に難しい。	上下左右の配置、間隔調整、並び替えなど、全てが簡単。
主な用途	タグリスト、小さなアイコンリストなど、テキストのように自然に折り返してほしい場合。	ナビゲーションメニュー、カードレイアウト、完璧な中央寄せ、複雑な配置が必要な場合

Blog カテゴリの記事一覧へ

tegasuki.comのトップへ戻る