【CSS】displayの違いと使い分けを図解！block/inlineからflexまで

CSSでレイアウトを調整していると、display: block;、display: inline;、display: inline-block;の違いでつまずくことがあります。特に初心者の方は、「横に並べたいだけなのに縦に落ちる」「widthやheightが効かない」「中央揃えにしたいのに動かない」といった悩みを持ちやすいです。

displayは、要素をどのような箱として表示し、周囲や子要素とどう並べるかを決めるCSSプロパティです。この記事では、block、inline、inline-block、flexの違いと使い分けから実務で迷いやすい中央揃えのトラブルまで含めて解説します。

CSSのdisplayプロパティとは？

CSSのdisplayプロパティとは、HTML要素の表示形式を指定するためのプロパティです。簡単にいうと、「その要素を縦に積むのか、横に並べるのか、子要素をどう配置するのか」を決める役割があります。たとえば、次のように書きます。

.box {
  display: block;
}

displayには多くの値がありますが、Web制作の初学者がまず押さえたいのは次の4つです。

displayの値	ざっくりした役割	よく使う場面
block	縦に並ぶ大きな箱	見出し、段落、セクション、ボタン化したリンク
inline	文章の一部のように横に並ぶ箱	文章中のリンク、強調テキスト
inline-block	横に並ぶがサイズ指定できる箱	タグ、ボタン、小さなナビ項目
flex	子要素の並び方を親で管理する箱	ナビ、カード横並び、上下左右中央揃え

displayは「見た目だけ」を変えるCSSです。HTMLの意味そのものは変わらないため、見出しやリンクなどのタグ選びはHTML側で適切に行いましょう。

【図解】block・inline・inline-blockの決定的な違い

block、inline、inline-blockの違いは、次の4つを見ると理解しやすいです。

• 横に並ぶか、縦に並ぶか
• widthやheightを指定できるか
• 余白（margin / padding）が正しく効くか
• 要素の幅がどのように決まるか

種類	並び方	width / height	margin / padding（余白）	幅の特徴
block	基本は縦に並ぶ	効く	上下左右すべて綺麗に効く	親要素の横幅いっぱいに広がりやすい
inline	文章のように横に並ぶ	基本的に効かない	左右は効くが、上下は無効（または崩れる）	中身の文字量に合わせて広がる
inline-block	横に並ぶ	効く	上下左右すべて綺麗に効く	中身または指定サイズに合わせて広がる

迷ったら、「blockは縦に積む」「inlineは文章の一部」「inline-blockは横並びできる小さな箱」と覚えると整理しやすいです。

display: block（縦に並ぶ、サイズ指定○）

display: block;は、要素をブロックとして表示します。ブロック要素は基本的に新しい行から始まり、次の要素も下に続きます。widthやheightも指定できます。

<div class="box">ブロック1</div>
<div class="box">ブロック2</div>

.box {
  display: block;
  width: 240px;
  height: 80px;
  background: #e8f4ff;
  margin-bottom: 12px;
}

この場合、.boxは縦に並びます。

div、p、section、article、h1などは、ブラウザの初期表示ではブロックのように扱われる代表的な要素です。block要素は何も指定しないと横幅いっぱいに広がることがあります。幅を決めたい場合は、widthやmax-widthを一緒に指定しましょう。

display: inline（横に並ぶ、サイズ指定×）

display: inline;は、文章中の一部として表示する形式です。
代表例はaタグやspanタグです。文章の途中に入れても改行されず、そのまま横に並びます。

<p>
  ここは<span class="marker">重要な文字</span>です。
</p>

.marker {
  display: inline;
  width: 200px;
  height: 60px;
  background: #fff59d;
}

この場合、backgroundは見えますが、widthやheightは意図通りに効きにくいです。

inlineは文章の流れに混ざる表示形式なので、箱としての横幅・高さを作りたい場面には向いていません。spanにwidthやheightを指定しても効かない場合、多くはinlineの仕様が原因です。箱として扱いたい場合はinline-blockまたはblockを使いましょう。

display: inline-block（横に並ぶ、サイズ指定○）

display: inline-block;は、inlineとblockの良いところを合わせたような表示形式です。
横に並びながら、width、height、paddingなどを指定しやすくなります。

<a class="tag-link" href="#">HTML</a>
<a class="tag-link" href="#">CSS</a>
<a class="tag-link" href="#">JavaScript</a>

.tag-link {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #2f6f9f;
  border-radius: 4px;
  color: #2f6f9f;
  text-decoration: none;
}

このように、横並びの小さなボタンやタグを作るときに便利です。ただし、inline-blockはHTML上の改行やスペースが、要素同士のすき間として表示されることがあります。

<a class="tag-link">HTML</a>
<a class="tag-link">CSS</a>

上のように改行して書くと、ブラウザ上では少しすき間ができます。小さなすき間なら問題ないことも多いですが、ぴったり詰めたいレイアウトではflexを使う方が管理しやすいです。

どっちを使う？「inline-block」と「flex（Flexbox）」の違いと使い分け

inline-blockとflexは、どちらも横並びのレイアウトで使われます。ただし、考え方が大きく違います。inline-blockは「要素自身を横に並べる指定」、flexは「親要素が子要素の並び方を管理する指定」です。

比較	inline-block	flex
指定する場所	横に並べたい要素自身	子要素を包む親要素
向いている場面	小さなボタン、タグ、文字リンク	ナビ、カード、複数カラム、上下左右中央揃え
すき間の管理	HTMLの改行やスペースの影響を受ける場合がある	gapで管理しやすい
縦位置の揃え方	vertical-alignなどを使う	align-itemsで揃えやすい
おすすめ度	単純な横並びなら便利	実務のレイアウトでは出番が多い

inline-blockが向いている例

小さなラベルや、文章中に近いボタンを並べるだけならinline-blockで十分です。

.label {
  display: inline-block;
  padding: 4px 10px;
  background: #eef7f2;
  border: 1px solid #7ebc8f;
}

flexが向いている例

ナビゲーションやカードのように、複数の子要素の間隔や縦位置をまとめて管理したい場合は flex が便利です。現代のWeb制作における横並びレイアウトは、ほとんどこの flexbox が使われています。

<nav class="global-nav">
  <a href="#">ホーム</a>
  <a href="#">講座一覧</a>
  <a href="#">お問い合わせ</a>
</nav>

.global-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

display: flex;を親に指定すると、直下の子要素を横に並べたり、間隔を調整したりしやすくなります。

 なぜ実務では inline-block より flex なの？

flexが圧倒的に使われる理由は、親要素（外枠）に一言CSSを書くだけで、子要素の並び方を自由自在にコントロールできるからです。特によく使うプロパティを3つ紹介します。

1. gap で隙間を均等に空けられる gap: 16px; と書くだけで、要素と要素の間にだけ綺麗な余白を作れます（inline-block のようにHTMLの改行でデザインが崩れる心配がありません）。

2. justify-content で左右の配置を操れる justify-content: space-between; を使えば、ロゴを左端、ナビゲーションを右端にピタッと自動で振り分けるレイアウトが瞬時に作れます。

3. align-items で上下中央揃えがカンタン 高さがバラバラのカード要素や、アイコンと文字が並ぶボタンでも、align-items: center; を指定するだけで一発で上下中央に綺麗に揃います。

よくあるCSSトラブル：block要素が「中央揃え」にならないときの解決策

display: block;にした要素を中央に置きたいのに、text-align: center;を書いても動かないことがあります。これは、text-alignが主に「中の文字やinline要素」を中央に寄せる指定だからです。

text-alignは効かない！margin: 0 auto; を使う理由

ブロック要素そのものを中央に寄せたい場合は、幅を指定したうえでmargin: 0 auto;を使います。

.card {
  display: block;
  width: 320px;
  text-align: center;
}

この指定では、.cardの中の文字は中央寄せになりますが、.card自体が中央に移動するわけではありません。

.card {
  display: block;
  width: 320px;
  margin: 0 auto;
}

margin: 0 auto;は、上下の余白を0、左右の余白をautoにする指定です。左右の余白が自動で均等になるため、幅が決まったブロック要素を中央に配置できます。block要素を中央に寄せる基本は、「widthまたはmax-widthを指定して、margin: 0 auto;」です。

widthを指定していないblock要素は、親要素いっぱいに広がるため、margin: 0 auto;を書いても中央寄せされたように見えない場合があります。

レスポンシブではmax-widthを使うと安全

スマホ対応まで考えるなら、固定のwidthだけでなくmax-widthも使うと安心です。

.card {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
}

この書き方なら、PCでは最大640pxに収まり、スマホでは画面幅に合わせて縮みます。

aタグをdisplay: blockにしてクリック範囲を広げる実務例

aタグは、初期状態では文章中のリンクとして扱われるため、inlineに近い表示になります。

そのため、リンク文字の部分だけがクリック範囲になり、ボタンやメニューとしては少し押しにくいことがあります。aタグをボタンやメニューとして使う場合は、display: block;やdisplay: inline-block;でクリックできる範囲を広げるのが実務ではよく使われます。

<a class="cta-button" href="#">無料で学習を始める</a>

.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background: #1f7a8c;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.cta-button:hover {
  background: #14515d;
}

横幅いっぱいのボタンにしたい場合は、display: block;にして幅を調整します。

.cta-button-wide {
  display: block;
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 24px;
  background: #1f7a8c;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

このように、displayと疑似クラスの:hoverを組み合わせると、クリックしやすく、反応もわかりやすいボタンを作れます。

block・inline・inline-block・flexの実務チェックリスト

実際にCSSを書くときは、次のように判断すると迷いにくくなります。

やりたいこと	おすすめ	理由
要素を縦に積みたい	display: block;	幅や高さを指定しやすい
文章の一部だけ装飾したい	display: inline;	文章の流れを崩しにくい
横並びの小さなボタンを作りたい	display: inline-block;	横に並び、paddingやwidthも扱いやすい
複数の要素をまとめて横並びにしたい	display: flex;	gapやalign-itemsで管理しやすい
block要素を中央に置きたい	margin: 0 auto;	左右の余白を自動で均等にできる

すべてをflexで解決しようとすると、CSSが大げさになる場合があります。小さなラベルや文章中の装飾ならinline-blockやinlineで十分なこともあります。

公式ドキュメントも確認する

displayはCSSレイアウトの土台になるプロパティです。より正確な仕様を確認したい場合は、MDN Web Docsの公式情報も参考になります。

• MDN Web Docs display
• MDN Web Docs Block and inline layout
• MDN Web Docs Basic concepts of flexbox
• MDN Web Docs margin

まとめ：4つのdisplayをマスターしてレイアウトを自由自在に作ろう

この記事では、CSSのdisplayプロパティについて解説しました。displayの基本は、block・inline・inline-block・flexの4つを押さえることです。

• block：縦に並び、幅や高さを指定しやすい
• inline：文章の一部として横に並ぶが、サイズ指定には向かない
• inline-block：横に並び、幅・高さ・余白も指定しやすい
• flex：親要素で子要素の並びや余白を管理しやすい

中央揃えで迷ったときは、text-alignが「中身の文字やinline要素」に効く指定なのか、margin: 0 auto;で「block要素そのもの」を中央に置くべきなのかを切り分けましょう。また、aタグをボタン化する場合は、display: inline-block;やdisplay: block;でクリック範囲を広げ、:hoverなどの疑似クラスで反応を付けると、使いやすいUIになります。