CSSのレイアウト関連プロパティー：displayの基礎から応用まで

CSSでのレイアウト設計は、ウェブデザインの中核を成す重要なスキルです。
その中でも、displayプロパティは要素の表示形式を決定する基本中の基本となるプロパティです。
本記事では、displayプロパティの概要、よく使う値の説明、具体例を交えて詳しく解説します。

displayプロパティとは？

displayプロパティは、HTML要素の表示形式を指定するために使用します。
デフォルトの値は要素の種類によって異なり、
例えば、<div>はblock、<span>はinlineとして表示されます。

基本構文

selector {
  display: value;
}

主な値

• block：要素をブロック要素として表示
• inline：要素をインライン要素として表示
• flex：要素をフレックスボックスコンテナとして表示
• grid：要素をグリッドコンテナとして表示

以下で、それぞれの値について詳しく見ていきます。

display: block

概要

ブロック要素として表示され、幅は親要素全体に広がります。
デフォルトでは、新しい行が生成されるため、他の要素の上に配置されます。

使用例

<div class="block-example">Block Element</div>

.block-example {
  display: block;
  background-color: lightblue;
  padding: 10px;
}

特徴

主にコンテナ要素（<div>、<section>など）に適用される。
独立した要素の配置に適している。

display: inline

概要

インライン要素として表示され、内容の幅だけを占めます。
新しい行は生成されず、他の要素と同じ行内に配置されます。

使用例

<span class="inline-example">Inline Element</span>

.inline-example {
  display: inline;
  color: red;
}

特徴

主にテキストやアイコンなど、行内での配置が求められる要素に適用。
デフォルトでインライン要素として扱われるタグ（例：<span>、<a>）に適している。

display: flex

概要

フレックスボックスコンテナとして要素を表示し、子要素を柔軟に配置します。
横並びや縦並び、均等配置など、複雑なレイアウトを簡単に実現できます。

使用例

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

特徴

子要素のサイズや配置を動的に調整可能。
サイドバーとメインコンテンツを横並びに配置する場合などに便利。

display: grid

概要

グリッドレイアウトコンテナとして要素を表示し、2次元のレイアウトを構築します。
フレックスボックスが1次元（横または縦）での配置に特化しているのに対し、
グリッドは行と列を同時に管理できます。

使用例

<div class="grid-container">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
  <div>Cell 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background-color: lightyellow;
}

特徴

行列を明示的に指定することで、複雑なレイアウトも簡単に実現可能。
ヘッダー、サイドバー、メインコンテンツ、フッターを組み合わせたページ全体のレイアウトに適している。

displayプロパティの比較表

値	主な用途	特徴
block	コンテナ要素	新しい行を生成し、幅を親に合わせる
inline	行内要素	内容の幅だけを占有
flex	柔軟なレイアウト構築	子要素を1次元で配置
grid	2次元のレイアウト構築	行と列を明示的に指定可能

displayの応用例

カードレイアウトの作成

以下は、display: flexとdisplay: gridを組み合わせてカードレイアウトを作成する例です。

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 8px;
}

よくある質問

Q1. display: noneは何に使う？

• 要素を非表示にする際に使用します。
  ただし、DOMには残るため、JavaScriptで再表示が可能です。

Q2. inline-blockとは？

• インライン要素のように配置されつつも、blockのように幅や高さを指定可能なプロパティです。

まとめ

displayプロパティは、ウェブサイトのレイアウト設計において最も基本的でありながら
柔軟性の高いツールです。
それぞれの値を適切に使い分けることで、効率的で視覚的に優れたデザインを実現できます。
まずは基本のblockとinlineを理解し、次にflexやgridを実際にプロジェクトで試してみましょう。

Favorite