displayプロパティ入門 - block・inline・inline-blockの違い

はじめに

CSSでWebページのレイアウトを構築する際、「なぜこの要素は横に並ばないのか」「なぜ幅や高さの指定が効かないのか」といった疑問に直面することがあります。これらの問題を理解するには、displayプロパティの仕組みを知ることが不可欠です。

displayプロパティは、要素がどのように表示されるか、そして子要素がどのようにレイアウトされるかを決定するCSSの根幹となるプロパティです。このプロパティを正しく理解することで、意図したレイアウトを効率的に実現できるようになります。

本記事では、displayプロパティについて以下の内容を解説します。

• ブロック要素（block）とインライン要素（inline）の違い
• inline-blockの特性と活用場面
• displayプロパティの主要な値（none、flex、gridなど）の概要
• 実務で役立つ使い分けのポイント

前提条件

本記事を読み進めるにあたり、以下の知識があることを前提としています。

• HTMLの基本的なタグ構造（div、span、pなど）
• CSSの基本構文（セレクタ・プロパティ・値の関係）
• CSSボックスモデルの基本的な理解

動作確認環境

• Google Chrome 131以降
• Firefox 133以降
• Safari 18以降
• Microsoft Edge 131以降

displayプロパティとは

MDN Web Docsでは、displayプロパティを次のように説明しています。

displayはCSSのプロパティで、要素をブロックボックスとインラインボックスのどちらとして扱うか、およびその子要素のために使用されるレイアウト（フローレイアウト、グリッド、フレックスなど）を設定します。

つまり、displayプロパティは要素の「外側の表示型」と「内側の表示型」の2つを定義します。

flowchart TB
    subgraph display["displayプロパティ"]
        direction TB
        outer["外側の表示型（outer display type）"]
        inner["内側の表示型（inner display type）"]
    end
    
    outer --> outer_desc["親要素のフローレイアウトでの振る舞い<br>（block / inline）"]
    inner --> inner_desc["子要素のレイアウト方法<br>（flow / flex / grid など）"]

ブロック要素（display: block）

display: blockを指定した要素は、ブロックボックスを生成します。ブロック要素には以下の特性があります。

ブロック要素の特性

HTMLでのデフォルトブロック要素

以下のHTML要素は、デフォルトでdisplay: blockとして表示されます。

• <div>
• <p>
• <h1>〜<h6>
• <ul>、<ol>、<li>
• <header>、<footer>、<section>、<article>
• <form>

ブロック要素の使用例

1
2
3
4
5

<div class="block-example">
  <p>1つ目の段落です。</p>
  <p>2つ目の段落です。</p>
  <p>3つ目の段落です。</p>
</div>

1
2
3
4
5

.block-example p {
  background-color: #e3f2fd;
  padding: 10px;
  margin: 5px 0;
}

この例では、各<p>要素がブロック要素として表示され、それぞれが新しい行に配置されます。

flowchart TB
    subgraph container["親要素（div）"]
        direction TB
        p1["1つ目の段落です。"]
        p2["2つ目の段落です。"]
        p3["3つ目の段落です。"]
    end
    
    p1 --> p2
    p2 --> p3

インライン要素（display: inline）

display: inlineを指定した要素は、インラインボックスを生成します。インライン要素は、ブロック要素とは異なる特性を持ちます。

インライン要素の特性

HTMLでのデフォルトインライン要素

以下のHTML要素は、デフォルトでdisplay: inlineとして表示されます。

• <span>
• <a>
• <strong>、<em>
• <img>（ただし置換要素として特殊な振る舞いをする）
• <code>、<kbd>
• <br>

インライン要素の使用例

1
2
3
4

<p>
  この文章には<span class="highlight">強調された部分</span>と
  <a href="#">リンク</a>が含まれています。
</p>

1
2
3
4

.highlight {
  background-color: #fff3e0;
  padding: 2px 5px;
}

この例では、<span>要素と<a>要素がテキストの流れの中に自然に配置されます。

インライン要素の注意点

インライン要素には、widthとheightを指定しても効果がありません。

1
2
3
4
5

/* 効果なし */
span {
  width: 200px;  /* 無視される */
  height: 100px; /* 無視される */
}

また、垂直方向のmarginも他の要素のレイアウトに影響を与えません。

1
2
3
4
5
6

span {
  margin-top: 50px;    /* レイアウトに影響しない */
  margin-bottom: 50px; /* レイアウトに影響しない */
  margin-left: 20px;   /* 有効 */
  margin-right: 20px;  /* 有効 */
}

inline-blockの特性と活用場面

display: inline-blockは、インライン要素とブロック要素の両方の特性を併せ持つ表示型です。CSS Display Level 3の仕様では、inline-blockはinline flow-rootと等価であると定義されています。

inline-blockの特性

flowchart LR
    subgraph inline-block["inline-blockの特性"]
        inline["インラインの特性<br>・横に並ぶ<br>・改行しない"]
        block["ブロックの特性<br>・width/height有効<br>・垂直marginが有効"]
    end

inline-blockの使用例：ナビゲーションメニュー

inline-blockは、横並びのナビゲーションメニューを作成する際によく使用されます。

1
2
3
4
5
6

<nav class="navigation">
  <a href="#" class="nav-item">ホーム</a>
  <a href="#" class="nav-item">サービス</a>
  <a href="#" class="nav-item">会社概要</a>
  <a href="#" class="nav-item">お問い合わせ</a>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

.navigation {
  background-color: #1976d2;
  padding: 10px;
}

.nav-item {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  background-color: #1565c0;
  margin-right: 5px;
  border-radius: 4px;
}

.nav-item:hover {
  background-color: #0d47a1;
}

inline-blockの使用例：ボタングループ

1
2
3
4
5

<div class="button-group">
  <button class="btn">保存</button>
  <button class="btn">キャンセル</button>
  <button class="btn">削除</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #4caf50;
  color: white;
}

inline-blockの注意点：ホワイトスペース問題

inline-block要素間には、HTMLのホワイトスペース（改行やスペース）に起因する隙間が発生します。

1
2
3
4
5
6

<!-- 隙間が発生する -->
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

この問題を解決する方法はいくつかあります。

方法1: 親要素のfont-sizeを0にする

1
2
3
4
5
6
7
8

.container {
  font-size: 0;
}

.box {
  display: inline-block;
  font-size: 16px; /* 子要素でフォントサイズを再設定 */
}

方法2: HTML要素を改行なしで記述する

1
2
3

<div class="container">
  <div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div>
</div>

方法3: Flexboxを使用する（推奨）

現代のWeb開発では、Flexboxを使用することでこの問題を回避できます。

1
2
3

.container {
  display: flex;
}

block・inline・inline-blockの比較

3つの表示型の違いを比較表にまとめます。

視覚的な比較

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="comparison">
  <div class="block-demo">block</div>
  <div class="block-demo">block</div>
  
  <span class="inline-demo">inline</span>
  <span class="inline-demo">inline</span>
  
  <span class="inline-block-demo">inline-block</span>
  <span class="inline-block-demo">inline-block</span>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.block-demo {
  display: block;
  width: 150px;
  height: 50px;
  background-color: #e3f2fd;
  margin: 5px 0;
  text-align: center;
  line-height: 50px;
}

.inline-demo {
  display: inline;
  background-color: #fff3e0;
  padding: 10px;
  /* width と height は効かない */
}

.inline-block-demo {
  display: inline-block;
  width: 120px;
  height: 50px;
  background-color: #e8f5e9;
  text-align: center;
  line-height: 50px;
  margin: 5px;
}

その他のdisplay値の概要

displayプロパティには、block、inline、inline-block以外にも多くの値があります。ここでは、主要な値の概要を紹介します。

display: none

display: noneを指定した要素は、表示されなくなり、レイアウトにも影響を与えなくなります。

1
2
3

.hidden {
  display: none; /* 要素は完全に非表示になる */
}

display: noneとvisibility: hiddenの違いは以下の通りです。

display: flex

display: flexを指定した要素はフレックスコンテナとなり、子要素（フレックスアイテム）を柔軟に配置できます。

1
2
3
4
5

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Flexboxの主な特徴は以下の通りです。

• 1次元レイアウト（行または列の方向）に特化
• 要素の配置と順序を柔軟に制御可能
• 要素間の余白を自動調整可能

display: grid

display: gridを指定した要素はグリッドコンテナとなり、子要素を2次元のグリッドに配置できます。

1
2
3
4
5

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

CSS Gridの主な特徴は以下の通りです。

• 2次元レイアウト（行と列の両方向）に対応
• 複雑なレイアウトを簡潔に記述可能
• 要素の配置を明示的に制御可能

display: inline-flex / inline-grid

inline-flexとinline-gridは、それぞれFlexboxとGridのインライン版です。要素自体はインライン要素のように振る舞い、内部の子要素はFlexbox/Gridでレイアウトされます。

1
2
3
4
5
6
7
8
9

.inline-flex-container {
  display: inline-flex;
  gap: 10px;
}

.inline-grid-container {
  display: inline-grid;
  grid-template-columns: repeat(2, 100px);
}

display: contents

display: contentsを指定した要素は、ボックスを生成せず、その子要素が親要素の直接の子であるかのように振る舞います。

1
2
3

.wrapper {
  display: contents; /* この要素のボックスは生成されない */
}

複数キーワード構文

CSS Display Level 3では、外側と内側の表示型を明示的に指定できる複数キーワード構文が導入されました。

1
2
3
4
5
6
7
8
9

/* 単一キーワード構文（従来の書き方） */
.element {
  display: inline-flex;
}

/* 複数キーワード構文（CSS Display Level 3） */
.element {
  display: inline flex;
}

主な対応関係は以下の通りです。

実務での使い分け

displayプロパティの値を適切に選択することで、効率的にレイアウトを構築できます。

使い分けの指針

flowchart TD
    A["要素のレイアウト方法を選択"] --> B{"横並びが必要？"}
    B -->|"いいえ"| C["display: block"]
    B -->|"はい"| D{"子要素の柔軟な配置が必要？"}
    D -->|"いいえ"| E["display: inline-block"]
    D -->|"はい"| F{"2次元配置が必要？"}
    F -->|"いいえ"| G["display: flex"]
    F -->|"はい"| H["display: grid"]

シナリオ別の推奨値

ブラウザ対応状況

displayプロパティの各値は、モダンブラウザで広くサポートされています。

まとめ

本記事では、CSSのdisplayプロパティについて、基本的な値の違いから実務での使い分けまで解説しました。

重要ポイント

• block要素: 前後で改行が発生し、width/heightの指定が可能
• inline要素: 横に並び、width/heightの指定は無効
• inline-block: 横に並びつつ、width/heightの指定が可能
• flex/grid: 現代のWebレイアウトの主流

displayプロパティを正しく理解し使い分けることで、意図したレイアウトを効率的に実現できます。特に、FlexboxやGridと組み合わせることで、レスポンシブで柔軟なレイアウトを構築できるようになります。

次のステップとして、Flexboxの詳細な使い方を学ぶことで、より実践的なレイアウト技術を身につけることができます。

参考リンク

• display - CSS: カスケーディングスタイルシート | MDN
• CSS Display Module Level 3 | W3C
• フローレイアウトにおけるブロックおよびインラインレイアウト | MDN
• CSS display の複数キーワード構文の使用 | MDN