HTMLとCSSでレイアウトを整えようとするとき、よくわからなくなるのがdisplayプロパティ。
「なぜ要素が横並びにならない？」「marginを指定しても効かない？」といった悩み、実はこのプロパティと深く関係しています。

この記事は、初心者の方向けに「displayって何？」「どんな種類がある？」「どう使い分ける？」をやさしく解説します。

displayとは？

displayは、HTML要素がどんな「箱」になって表示されるかを指定するCSSプロパティです。
例えば段落（p）や見出し（h1）は**ブロック要素**、リンク（a）やspanは**インライン要素**として振る舞うよう、ブラウザが初めから決めています。

よく使われるdisplayの種類

• block：横幅いっぱいに広がり、上下で改行される
• inline：テキストと同じ行に収まり、サイズ指定が効かない
• inline‑block：インラインのように並ぶが、width／height指定も可能
• flex：子要素を柔軟に並べる（行・列・間隔の制御が得意）
• grid：行と列で複雑なレイアウトが組める（高度な配置に最適）

① blockの例

display: block;は改行されて縦に要素が並ぶので、段落やボックス系に使われることが多いです。

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

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

② inlineの例

spanやリンク（a）などのインライン要素はテキストと同じ行に並び、横方向に収まります。ただしwidth／height指定は効きません。

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

③ inline‑blockの例

セパレートなボックスを横に並べたいけど、幅・高さ指定もしたいときに便利です。

<span style="display: inline-block; width:100px; height:50px; background: lightcoral;">箱1</span>
<span style="display: inline-block; width:100px; height:50px; background: lightseagreen;">箱2</span>

④ flexの例

display: flex;を指定すると、子要素が横並びになり、gapで簡単に間隔も取れます。レイアウトの柔軟性が高いです。

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

⑤ gridの紹介

複雑な配置や2次元レイアウトを行うならdisplay: grid;も強力です。別の記事で詳しく解説予定！

用途・使い分けのポイント

• 横並びだけなら → inline‑blockやflex
• 幅／高さを指定したい → inline‑blockかflex
• 余白や位置調整もしたい → flexが最も扱いやすい
• 複雑なグリッド配置 → gridを使いましょう

注意点

• 標準の要素（p, h1, spanなど）はデフォルトdisplayがあることを覚えておくと理解しやすい
• display: inlineではwidth／heightが効かないので注意
• flexでは親要素にdisplay: flex;が必要です

おわりに

displayはWebレイアウトの基本中の基本です。
block／inlineの違い、inline‑blockで箱を並べる方法、flexで柔軟に扱う方法をしっかり押さえておけば、多くのレイアウトに対応できます。

次回は、display: grid;を使った**2列・3列のカードレイアウト**の作り方も紹介する予定ですので、お楽しみに！