CSS displayプロパティの使い方【block/inline/flex/grid】

displayプロパティとは？

displayは、要素の表示形式を決めるCSSプロパティです。「この要素をブロックとして表示するか、インラインとして表示するか、Flexboxコンテナにするか」などを制御します。CSSレイアウトの最も基本的なプロパティの1つです。

たとえば、本棚を想像してください。本を1冊ずつ縦に積むのがblock。本を横に並べるのがinline。displayは「要素をどう並べるか」を決める指示書です。

HTMLの要素にはデフォルトのdisplay値があります。しかしCSSで自由に変更できます。divをinlineにしたり、spanをblockにしたりできます。この柔軟さがCSSレイアウトの強みです。

基本の値

block（ブロック要素）

前後に改行が入り、横幅いっぱいに広がります。div、p、h1〜h6 などがデフォルトでblockです。width/heightを指定できます。

ブロック要素は「1つで1行を占める」と覚えましょう。widthを指定しても、残りのスペースはmarginで埋められます。ブロック要素同士は自動的に縦に積み重なります。余白の調整にはmarginとpaddingを使います。詳しくはmarginとpaddingの違いを参照してください。

inline（インライン要素）

前後に改行が入らず、内容の幅だけを占めます。span、a、strong などがデフォルトでinlineです。width/heightは指定できません。上下のmarginも効かない点に注意しましょう。

inline-block（両方の特徴）

inlineのように横に並びつつ、blockのようにwidth/heightを指定できます。ボタンを横に並べたいときなどに便利です。

.badge {
  display: inline-block;
  width: 80px;
  padding: 4px 8px;
  text-align: center;
  background: #e0f2fe;
  border-radius: 4px;
}

none（非表示）

要素を完全に非表示にします。スペースも占めません。JavaScriptで表示/非表示を切り替えるときによく使います。

.hidden { display: none; }

display: noneを使うと、スクリーンリーダー（読み上げソフト）からも要素が消えます。アクセシビリティの観点では、視覚的に隠すだけならvisibility: hiddenやposition: absoluteで画面外に移動させる方法もあります。用途に応じて使い分けましょう。

それぞれの違いまとめ

💡 HTMLのブロック要素とインライン要素で基本を確認できます。

レイアウト用の値

flex（Flexboxレイアウト）

子要素を横並び（または縦並び）にするレイアウト手法です。ナビゲーション、カードの横並び、中央揃えなどに使います。

.nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

📖 Flexbox入門で詳しく学べます。

grid（Gridレイアウト）

行と列で2次元的にレイアウトを組む手法です。ページ全体の構成やカードギャラリーに向いています。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

📖 CSS Grid入門で詳しく学べます。

いつどちらを使うか

• flex：1方向の並び（ナビの横並び、ボタンの横並びなど）
• grid：2方向の配置（ページレイアウト、ギャラリーなど）

迷ったらflexから始めましょう。ほとんどのレイアウトはflexで実現できます。複雑な2次元配置が必要になったときにgridを検討すれば十分です。

実践例

インライン要素に幅を指定する（inline-block）

/* spanはデフォルトでinline → widthが効かない */
/* inline-blockにすると幅を指定できる */
.tag {
  display: inline-block;
  width: 100px;
  padding: 4px 12px;
  background: #dbeafe;
  border-radius: 4px;
  text-align: center;
}

要素の表示/非表示切り替え（none）

/* デフォルトは非表示 */
.modal { display: none; }

/* .activeクラスがついたら表示 */
.modal.active { display: block; }

ナビゲーションの横並び（flex）

nav ul {
  display: flex;
  list-style: none;
  gap: 24px;
  padding: 0;
}

nav a {
  text-decoration: none;
  color: #333;
}

カードレイアウト（grid）

display: gridを使うと、カードを均等に並べるレイアウトが簡単に作れます。

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

auto-fillとminmax()を組み合わせると、画面幅に応じてカードの列数が自動で変わります。レスポンシブ対応が1行で実現できる便利なテクニックです。

🔗 CSS入門ガイドで基礎から学べます。

よくある間違い

• inline要素にwidth/heightが効かない：span や a にwidthを指定しても効きません。display: inline-block または display: block に変更しましょう。
• display: none と visibility: hidden の違い：display: none は要素が完全に消え、スペースも占めません。visibility: hidden は見えなくなりますが、スペースは残ります。
• margin: 0 autoが効かない：display: inlineの要素にはmargin: autoが効きません。中央揃えしたいときは、display: blockに変更してwidthを指定しましょう。inline-blockの場合は、親要素にtext-align: centerを指定する方法もあります。

📖 positionプロパティとの組み合わせも学びましょう。

まとめ

displayはCSSの土台となるプロパティです。最初のCSSで基礎を固めてから、FlexboxやGridに進みましょう。