displayプロパティ完全ガイド

display はCSSで最も重要なプロパティの一つです。

主要な値

block

.block {
  display: block;
}

• 幅は親要素いっぱいに広がる
• 前後に改行が入る
• div, p, h1 などのデフォルト

inline

.inline {
  display: inline;
}

• コンテンツの幅のみ占有
• 前後に改行が入らない
• span, a, strong などのデフォルト

inline-block

.inline-block {
  display: inline-block;
}

• inline のように横に並ぶ
• block のように width/height を指定可能

flex / grid

.flex { display: flex; }
.grid { display: grid; }

• モダンレイアウトの基本
• 子要素の配置を柔軟に制御

用途に応じて適切な値を選択しましょう。