Webサイトをコーディングしていて、
「思った通りにレイアウトが決まらない」「横並びにできない」
といった経験はありませんか？
その原因の多くは、CSSのdisplayプロパティの理解不足にあります。
本記事では、displayの基本から応用まで、
各値の違い・使い分け・よくあるトラブル例まで、図解とコード例付きで徹底解説します。
displayプロパティとは？
displayは、要素のボックスの種類や並び方を指定するプロパティです。
- ブロック要素（block）やインライン要素（inline）の挙動
- 横並びや縦並びの制御
- FlexboxやGridなどのレイアウト制御
すべてdisplayで決まります。
基本の種類
| 値 | 説明 | 代表的なHTML要素 |
|---|---|---|
block | ブロックレベル要素。改行が入り、幅は親要素いっぱい | <div>, <p>, <h1> |
inline | インライン要素。改行されず、横並び | <span>, <a> |
inline-block | インラインの性質を持ちながら、幅・高さを指定可能 | <img>など |
none | 非表示 | すべての要素 |
flex | Flexboxコンテナに変える | <div> |
grid | Gridコンテナに変える | <div> |
blockとinlineの違い
block要素の特徴
- 画面幅いっぱいに表示される
- 上下に余白（改行）が入る
- 幅・高さを自由に指定できる
See the Pen Untitled by suguru (@suguru22) on CodePen.
inline要素の特徴
- 横方向に並ぶ
- 幅・高さは無視される
- 改行されず、文字や他のinline要素と並ぶ
See the Pen Untitled by suguru (@suguru22) on CodePen.
inline-blockの特徴
- 横並び可能
- 幅・高さを指定できる
- marginやpaddingも適用される
See the Pen Untitled by suguru (@suguru22) on CodePen.
noneで要素を非表示にする
- 完全にDOMから表示を消す
- レイアウトにも影響を与えない
See the Pen Untitled by suguru (@suguru22) on CodePen.
注意：visibility: hidden とは違い、display: none はレイアウトも消えます。
Flexboxで横並び・縦並びを自由に制御
Flexコンテナの作り方
See the Pen Untitled by suguru (@suguru22) on CodePen.
Flexboxでできること
justify-content：左右配置（start, center, space-betweenなど）align-items：上下配置（start, center, stretchなど）- 横並びだけでなく縦並びも可能 (
flex-direction)
display: gridでレイアウトを制御する
See the Pen Untitled by suguru (@suguru22) on CodePen.
- 2列×2行のグリッドを簡単に作れる
- Flexよりもレイアウトの制御が精密
よくある「displayが効かない」原因と対策
| 原因 | 解決方法 |
|---|---|
| 要素がinlineでwidthやheightが効かない | display: inline-block または block に変更 |
| FlexやGridを指定しても思った通りに並ばない | 子要素にflex-growやalign-itemsなどを指定 |
| display:noneが効かないと思った | visibilityやopacityと混同していないか確認 |
| CSSの競合 | 優先順位・セレクタの詳細度を確認 |
| インラインスタイルで上書きされている | 外部CSSを確認 |
まとめ表：displayプロパティ早見表
| 値 | 特徴 | 使いどころ |
|---|---|---|
| block | 改行される、幅いっぱい | div, p, h1などのブロック要素 |
| inline | 横並び、幅・高さ無効 | span, aなど文字やリンク |
| inline-block | 横並び＋幅高さ指定可 | 画像やボタンなど |
| none | 非表示、レイアウトにも影響なし | モーダル非表示など |
| flex | Flexコンテナ、横並び/縦並び | ナビゲーション、カードレイアウト |
| grid | Gridコンテナ、行列レイアウト | 複雑なグリッドレイアウト |
