CSS display 属性

JPKODA 編集部 May 6, 2026

CSSにおける display プロパティは、要素のレンダリング方法、および他の要素とどのように相互作用するかを決定する極めて重要な属性です。

display プロパティの異なる値、特に block、inline、inline-block を理解することは、要素のボックスモデル（Box Model）の振る舞いを決定し、ドキュメント内でのサイズ、スペーシング、配置の流れに直結します。

1. display プロパティの理解

display プロパティは、要素の表示タイプを指定します。すべての要素にはデフォルトの display 値があり、通常は block または inline です。しかし、CSSを使用してこのデフォルトの挙動を上書きすることが可能です。

1.1 display: block (ブロックレベル要素)

ブロックレベル要素（Block-level element）は常に新しい行から始まり、利用可能な全幅を占有します（幅を明示的に設定している場合を除く）。ブロックレベル要素は width と height プロパティ、および全方向の margin と padding を完全に遵守します。

display: block の特徴：

常に新しい行から開始される。
利用可能な全幅（100%）を占有する。
width と height プロパティが適用される。
全方向（上下左右）の margin と padding が適用される。
インライン要素や他のブロックレベル要素を中に含むことができる。

デフォルトでブロックレベルの HTML 要素例：

<div>
<p>
<h1> 〜 <h6>
<form>
<header>
<footer>
<section>

コード例：

div {
  display: block; /* デフォルト値ですが、明示的に宣言することも一般的です */
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin: 20px;
  padding: 10px;
}

<div>これはブロックレベル要素です。</div>
<div>これは別のブロックレベル要素です。</div>

この例では、各 div は必ず新しい行から配置されます。

1.2 display: inline (インライン要素)

インライン要素（Inline element）は新しい行から開始されず、コンテンツに必要な幅だけを占有します。インライン要素は width および height プロパティを遵守しません。垂直方向（上下）の margin と padding は適用されますが、通常は周囲の要素を押し退けることはありません（つまり、レイアウトフローに影響を与えません）。一方で、水平方向（左右）の margin と padding は正しく遵守されます。

display: inline の特徴：

新しい行から開始されない。
コンテンツに必要な幅のみを占有する。
width と height プロパティが適用されない。
水平方向の margin と padding は適用される。
垂直方向の margin と padding は周囲のレイアウトに影響を与えない（視覚的には重なる可能性がある）。
ブロックレベル要素を中に含むことはできない。

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

<span>
<a>
<img>
<strong>
<em>

コード例：

span {
  display: inline;
  background-color: lightcoral;
  margin: 20px; /* 左右のマージンのみがレイアウトに影響します */
  padding: 10px; /* 左右のパディングのみがレイアウトに影響します */
}

<p>
  これは <span>インライン</span> 要素です。
  <span>別のインライン</span> 要素です。
</p>

この例では、span 要素は p 要素内のテキストとして流れるように配置されます。垂直方向の margin や padding を設定しても、上下の行を押し退けるのではなく、重なるような挙動になります。

1.3 display: inline-block (インラインブロック要素)

display: inline-block は、inline と block のハイブリッドです。インライン要素のように流れるように配置され（新しい行から始まらない）、同時にブロックレベル要素のように width、height、および全方向の margin と padding を遵守します。

display: inline-block の特徴：

新しい行から開始されない（inline の特性）。
デフォルトではコンテンツに必要な幅のみ占有するが、width と height を設定できる（block の特性）。
全方向の margin と padding を遵守する。
インライン要素やブロックレベル要素を中に含むことができる。

主なユースケース：

横並びのナビゲーションメニューの作成。
テキストのように流れる要素のグリッド（画像ギャラリーなど）の作成。
float を使用せずに要素を横に並べる。

コード例：

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 80px;
  background-color: lightgreen;
  margin: 10px;
  padding: 5px;
  text-align: center;
}

<div>
  <div class="inline-block-element">要素 1</div>
  <div class="inline-block-element">要素 2</div>
  <div class="inline-block-element">要素 3</div>
</div>

この例では、inline-block-element クラスを持つ div は横並びに表示され、設定したサイズや間隔が正確に適用されます。

2. 実戦的なサンプルとデモ

2.1 示例 1：ナビゲーションメニュー

inline-block の最も一般的な用途の一つは、水平方向のナビゲーションメニューです。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  list-style: none; /* 箇条書きのドットを削除 */
  margin: 0;
  padding: 0;
  text-align: center; /* メニュー項目を中央揃え */
}

nav ul li {
  display: inline-block; /* リスト項目を水平に並べる */
  margin: 0 10px; /* 項目間の余白 */
}

nav ul li a {
  display: block; /* リンクエリア全体をクリック可能にし、paddingを設定可能にする */
  padding: 10px 20px;
  background-color: #eee;
  text-decoration: none;
}

2.2 示例 2：画像ギャラリー

inline-block を使用して、シンプルな画像ギャラリーを作成できます。

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.gallery {
  text-align: center;
}

.gallery img {
  display: inline-block;
  width: 200px;
  height: 150px;
  margin: 10px;
  object-fit: cover; /* アスペクト比を維持してフィットさせる */
}

2.3 示例 3：block を使用した全幅ヘッダー

<header>
  <h1>My Website</h1>
  <p>A simple website example.</p>
</header>

header {
  display: block;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
}