HTMLとCSSを使ってレイアウトを整えるうえで欠かせないのが displayプロパティ です。
「要素がなぜ横並びにならない？」「なぜmarginが効かない？」そんなとき、displayが関係しているかもしれません。この記事では、初心者の方に向けてdisplayプロパティの基本とその使い分けをやさしく解説します。

displayとは？

displayは、HTML要素が「どのように表示されるか」を指定するCSSプロパティです。
例えば、段落（p）や見出し（h1など）はデフォルトで「ブロック要素」として表示され、aタグやspanは「インライン要素」として表示されます。

よく使うdisplayの種類

• block：幅いっぱいに表示され、改行される
• inline：テキストと同じ行に表示される（幅や高さの指定ができない）
• inline-block：インラインのように並びつつ、サイズ指定もできる
• flex：子要素を柔軟に並べる（横並び・縦並びの制御がしやすい）
• grid：行と列でレイアウトを組める（複雑な構成に向いている）

block・inline・flexの違いを例で見てみよう

1. blockの例

divなどのブロック要素は、改行されて縦に積み重なります。

<div style="background: lightblue;">ブロック1</div>
<div style="background: lightgreen;">ブロック2</div>

→ 「ブロック1」と「ブロック2」が縦に並びます。

2. inlineの例

spanやタグなどのインライン要素は、テキストのように横に並びます。

<span style="background: pink;">インライン1</span>
<span style="background: yellow;">インライン2</span>

<div style="display: flex;">
  <div style="background: salmon; padding: 10px;">アイテム1</div>
  <div style="background: skyblue; padding: 10px;">アイテム2</div>
</div>