【初心者向け】CSSの「display」ってなに？block / inline / flex / grid の使い分けをわかりやすく解説！

CSSでレイアウトを作るとき、よく登場するのが display（ディスプレイ）というプロパティ。

でも…

と迷ったことはありませんか？

今回は、**displayの基本4種類（block / inline / flex / grid）**の違いと使いどころを、初心者向けにやさしく説明します！

💡 displayってなに？

display は、**HTMLの要素をどうやって並べるか（見せるか）**を決めるプロパティです。

① display: block;（ブロック）

✅ 特徴：

• 横幅いっぱいに広がる

• 上下に積み重なる（改行される）

• 幅・高さの指定ができる

📌 よく使われるタグ：

div, section, p, h1〜h6

💬 例：

div {
  display: block;
}

📦 ボックスのような要素。レイアウトの基本です。

② display: inline;（インライン）

✅ 特徴：

• 横に並ぶ

• 改行されない

• 幅・高さの指定ができない（基本的に）

📌 よく使われるタグ：

span, a, strong

💬 例：

span {
  display: inline;
}

🔤 テキストの中で使う、小さな要素向きです。

③ display: flex;（フレックス）

✅ 特徴：

• 子要素を横・縦にきれいに並べる

• 中央揃えや間隔の調整がカンタン！

• レスポンシブ対応しやすい

💬 例：

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

🧩 複数のアイテムを整列させたいときに便利！

④ display: grid;（グリッド）

✅ 特徴：

• 要素を縦横のマス目（グリッド）状に配置

• 複雑なレイアウトも組みやすい

• 明確に行・列を指定できる

💬 例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

📊 雑誌のレイアウトのような配置がしたいときに最適！

🔁 まとめ：どう使い分ける？

CSSの display プロパティは、HTMLの要素を「どう配置するか」を決めるために使います。基本的な4つの使い方には、それぞれ特徴と向いている場面があります。

まず block は、幅いっぱいに広がって上下に積み重なる要素です。見出しや段落、セクションのようなまとまりのある要素に使われます。

一方 inline は、改行されずに横に並ぶ要素で、テキストの一部を装飾したり、リンクを貼ったりするときに便利です。ただし、幅や高さの指定はできないため、あくまで文字と一緒に使う小さな要素向けです。

flex は、要素を横や縦にきれいに並べることができるレイアウト方法で、中央揃えやスペース調整も簡単にできます。ナビゲーションやボタンの横並びなど、整った配置をしたいときに便利です。

最後に grid は、縦横にマス目状に配置できるレイアウト方法で、複数の要素を行・列でそろえて並べたいときに最適です。複雑なレイアウトを作る場合にとても強力です。

このように、display の種類を理解して適切に使い分けることで、思い通りのWebレイアウトが作れるようになりますよ。

✨ 補足：inline-blockもあるよ！

display: inline-block; は、
「インラインのように横に並ぶけど、幅や高さの指定もできる」という便利な中間タイプ！

いかがでしたでしょうか。
こんなことが聞きたい、もっとここをわかりやすく教えて欲しいなどのご意見がありましたら、お気軽にコメントしてもらえると嬉しいです！

岡知咲夜のホームぺージ
https://emi8-okachi.jp/